---
title: "Roving Focus"
description: "Utility component that implements the roving tabindex method to manage focus between items."
canonical_url: "https://vinicunca.dev/akar/utilities/roving-focus"
---
# Roving Focus

> Utility component that implements the roving tabindex method to manage focus between items.

```vue [index.vue]
<script setup lang="ts">
import { RovingFocusGroup, RovingFocusItem } from 'akar'
</script>

<template>
  <div class="akar-demo akar-demo-RovingFocus">
    <div class="flex flex-col justify-center gap-4">
        <p class="dark:text-stone-200 text-xs">
          Tab to focus
        </p>
        <RovingFocusGroup
          orientation="horizontal"
          class="flex items-center gap-2 "
        >
          <RovingFocusItem
            class="font-medium dark:text-white px-4 py-2 rounded-lg bg-neutral-700 focus:bg-neutral-800 hover:bg-neutral-800 transition"
            as="button"
          >
            Button 1
          </RovingFocusItem>
          <RovingFocusItem
            class="font-medium dark:text-white px-4 py-2 rounded-lg bg-neutral-700 focus:bg-neutral-800 hover:bg-neutral-800 transition"
            as="button"
          >
            Button 2
          </RovingFocusItem>
          <RovingFocusItem
            class="font-medium dark:text-white px-4 py-2 rounded-lg bg-neutral-700 focus:bg-neutral-800 hover:bg-neutral-800 transition"
            as="button"
          >
            Button 3
          </RovingFocusItem>
        </RovingFocusGroup>
      </div>
  </div>
</template>
```

> [!NOTE]
> 
> Learn more about roving tabindex in [Keyboard Navigation Inside Composite Components](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-6-keyboard-navigation-inside-components)

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { RovingFocusGroup, RovingFocusItem } from 'akar';
</script>

<template>
  <RovingFocusGroup>
    <RovingFocusItem />
  </RovingFocusGroup>
</template>
```

## API Reference

### Group

Contains all the parts of a Roving Focus

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `currentTabStopId` |  | `string \| null` | The controlled value of the current stop item. Can be binded as `v-model`. |
| `defaultCurrentTabStopId` |  | `string` | The value of the current stop item.<br><br>Use when you do not need to control the state of the stop item. |
| `dir` |  | `"ltr" \| "rtl"` | The direction of navigation between items. |
| `loop` | `false` | `boolean` | Whether keyboard navigation should loop around |
| `orientation` |  | `"vertical" \| "horizontal"` | The orientation of the group.<br>Mainly so arrow navigation is done accordingly (left & right vs. up & down) |
| `preventScrollOnEntryFocus` | `false` | `boolean` | When `true`, will prevent scrolling to the focus item when focused. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `entryFocus` | `event: Event` |  |
| `update:currentTabStopId` | `value: string \| null` |  |

**Methods**

| Method | Type | Description |
| --- | --- | --- |
| `getItems` | `(includeDisabledItem?: boolean) => { ref: HTMLElement; value?: any; }[]` |  |

[RovingFocusGroup.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RovingFocus/RovingFocusGroup.vue)

| Data attribute | Value |
| --- | --- |
| `[data-orientation]` | "vertical" \\| "horizontal" \\| "null" |

### Item

The item that would inherit the roving tabindex

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `active` |  | `boolean` | When `true`, item will be initially focused. |
| `allowShiftKey` |  | `boolean` | When `true`, shift + arrow key will allow focusing on next/previous item. |
| `as` | `"span"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `focusable` | `true` | `boolean` | When `false`, item will not be focusable. |
| `tabStopId` |  | `string` |  |

[RovingFocusItem.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/RovingFocus/RovingFocusItem.vue)

| Data attribute | Value |
| --- | --- |
| `[data-active]` | Present when not active |
| `[data-disabled]` | Present when not focusable |
| `[data-orientation]` | "vertical" \\| "horizontal" \\| "null" |

## Examples

### Vertical orientation

```vue
<template>
  <RovingFocusGroup :orientation="'vertical'">
    …
  </RovingFocusGroup>
</template>
```

### Loop

Use `loop` property to enable roving from last item to the first item, and vice versa.

```vue
<template>
  <RovingFocusGroup loop>
    …
  </RovingFocusGroup>
</template>
```

### Initial focus item

Set `active` prop to item to initially focused item.

```vue
<template>
  <RovingFocusGroup>
    <RovingFocusItem>1</RovingFocusItem>
    <RovingFocusItem active>2</RovingFocusItem>
    <RovingFocusItem>3</RovingFocusItem>
  </RovingFocusGroup>
</template>
```

### Unfocusable item

Set `focusable="false"` prop to item will prevent them from being focused.

```vue
<template>
  <RovingFocusGroup>
    <RovingFocusItem>1</RovingFocusItem>
    <RovingFocusItem :focusable="false">2</RovingFocusItem>
    <RovingFocusItem>3</RovingFocusItem>
  </RovingFocusGroup>
</template>
```

## Accessibility

Adheres to the [Keyboard Navigation Inside Composite Components](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-6-keyboard-navigation-inside-components).

### Keyboard Interactions

| Key | Description |
| --- | --- |
| <kbd>ArrowDown</kbd> | Moves focus to the next roving focus item in the group. |
| <kbd>ArrowRight</kbd> | Moves focus to the next roving focus item in the group. |
| <kbd>ArrowUp</kbd> | Moves focus to the previous roving focus item in the group. |
| <kbd>ArrowLeft</kbd> | Moves focus to the previous roving focus item in the group. |
| <kbd>Space</kbd> / <kbd>Enter</kbd> | Triggers click on the roving focus item. |


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.