Roving Focus
Utility component that implements the roving tabindex method to manage focus between items.
Tab to focus
info
Learn more about roving tabindex in Keyboard Navigation Inside Composite Components
Anatomy
Import all parts and piece them together.
vue
<script setup>
import { RovingFocusGroup, RovingFocusItem } from 'reka-ui'
</script>
<template>
<RovingFocusGroup>
<RovingFocusItem />
</RovingFocusGroup>
</template>API Reference
Group
Contains all the parts of a Roving Focus
| Data Attribute | Value |
|---|---|
[data-orientation] | "vertical" | "horizontal" | "undefined" |
Item
The item that would inherit the roving tabindex
| Data Attribute | Value |
|---|---|
[data-active] | Present when not active |
[data-disabled] | Present when not focusable |
[data-orientation] | "vertical" | "horizontal" | "undefined" |
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.
Keyboard Interactions
| Key | Description |
|---|---|
ArrowDown | Moves focus to the next roving focus item in the group. |
ArrowRight | Moves focus to the next roving focus item in the group. |
ArrowUp | Moves focus to the previous roving focus item in the group. |
ArrowLeft | Moves focus to the previous roving focus item in the group. |
SpaceEnter | Triggers click on the roving focus item. |