◇

RovingFocus

1 parts

Anatomy

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

vue

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

<RovingFocusItem />

API Reference

RovingFocusItem

Item

A single focusable item within a `RovingFocusGroup`. It registers itself with the group's collection, exposes itself as the sole tab stop when current (`tabindex="0"`, others `-1`), and handles the arrow-key navigation that moves focus to its siblings. Use `focusable` to opt an item out of the tab order and `active` to mark the current selection so it gets focus on group entry.

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.