◇

RovingFocus

2 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  RovingFocusItem,
  RovingFocusGroup,
} from '@robonen/primitives/roving-focus';

<RovingFocusItem>
  <RovingFocusGroup />
</RovingFocusItem>

API Reference

RovingFocusItem

Item

Prop	Type	Default	Description
`tabStopId`?	`string`	—	Unique tab-stop id. Auto-generated via config `useId` when omitted.
`focusable`?	`boolean`	`true`	Whether this item is focusable.
`active`?	`boolean`	—	Marks the item as active (current selection).
`allowShiftKey`?	`boolean`	`false`	Allow `Shift+Arrow` for navigation.

RovingFocusGroup

Group

Prop	Type	Default	Description
`orientation`?	`Orientation`	—	Navigation orientation — decides which arrow keys move focus.
`dir`?	`Direction`	—	Writing direction (LTR / RTL). Falls back to `useConfig().dir`.
`loop`?	`boolean`	`false`	Wrap around at the ends.
`currentTabStopId`?	`string \| null`	—	Controlled current tab-stop id.
`defaultCurrentTabStopId`?	`string`	—	Initial current tab-stop id (uncontrolled).
`preventScrollOnEntryFocus`?	`boolean`	`false`	Prevent scroll when focus enters the group.