Inputsibling
Pair with Input for search/autocomplete patternsListbox
Controlled listbox for search results, autocomplete dropdowns, and command menus. Provides Menu-like styling without requiring a trigger.
Setup
import { Listbox } from '@fragments-sdk/ui';Examples
Default
Basic listbox with selectable items
Loading preview...
Search Results
Typical search results pattern with label and metadata
Loading preview...
With Groups
Grouped items with labels
Loading preview...
Empty State
No results found message
Loading preview...
With Disabled Items
Mix of enabled and disabled items
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Listbox.Item, Listbox.Group, or Listbox.Empty components |
style | object | Not set | — |
tabIndex | number | Not set | — |
onFocus | function | Not set | — |
onKeyDown | function | Not set | — |
Usage Guidelines
When to use
- Search result dropdowns
- Autocomplete suggestions
- Command palette results
- Keyboard-navigable option lists
When not to use
- Static lists without selection (use List)
- Action menus with trigger button (use Menu)
- Form field selection (use Select)
- Navigation menus (use Sidebar or Tabs)
Best practices
- Control open/close state externally based on input focus or query
- Listbox provides arrow/home/end + Enter/Space keyboard navigation when focused
- Use Listbox.Empty for no results state
- Group related items with Listbox.Group when appropriate
Accessibility
- Uses listbox and option ARIA roles
- aria-selected indicates current selection
- aria-disabled for non-interactive items
- Connect to input with aria-controls for full combobox pattern