useRovingFocus API
Keyboard navigation for composite widgets where arrow keys move focus between items, skipping disabled ones.
Related
Explore these related pages for additional context and usage patterns.
| Page | Category |
|---|---|
| useRovingFocus | System |
| Treeview | Disclosure |
| useHotkey | System |
| useEventListener | System |
| createStep | Selection |
Functions
useRovingFocus
(items: () => RovingItem[], options?: RovingFocusOptions) => RovingFocusReturnOptions
target
MaybeRefOrGetter<HTMLElement | null | undefined>orientation
"horizontal" | "vertical" | "both" | undefinedArrow key mapping. Ignored when columns is set (grid uses all 4 arrows).
circular
boolean | undefinedcolumns
MaybeRefOrGetter<number> | undefinedColumn count for grid navigation. When set, items are treated as a 2D grid in row-major order: Left/Right step ±1, Up/Down step ±columns, Home/End go to row start/end, Ctrl+Home/End go to first/last overall.
onFocus
((id: ID) => void) | undefinedProperties
focusedId
ShallowRef<ID | undefined>