Skip to content

useListboxNav

useListboxNav<T>(options): UseListboxNavReturn

Defined in: src/hooks/useListboxNav/useListboxNav.ts:84

Shared keyboard navigation for listbox-like surfaces (Select, MultiSelect, Combobox, CommandPalette). Tracks an activeIndex, skips disabled items, and exposes a single handleKeyDown covering Arrow / Home / End / Enter / Escape semantics.

The hook is purely logical — consumers render the list and bind the handler to an input or the listbox container. Scroll-into-view is the consumer’s concern.

Type Parameters

T

T

Parameters

options

UseListboxNavOptions<T>

Returns

UseListboxNavReturn

Example

const { activeIndex, handleKeyDown } = useListboxNav({
items: filtered,
isItemDisabled: o => o.disabled ?? false,
onSelect: (item) => commit(item),
onEscape: () => close(),
});