Listbox
Scrollable list of selectable options with single or multiple selection and keyboard navigation.
Examples
Basic with selected item
Single-select listbox with the active item highlighted.
Multi-select
Multiple items can be toggled on or off simultaneously.
With groups
Items organised into named sections with visual separators.
Disabled items
Some options are disabled and show a locked badge.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Listbox } from "@rokle/components";import { Listbox } from "@rokle/components";
export function Example() {
return <Listbox />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { label: string; value: string }[] | - | List of available options. |
| value | string | string[] | - | Selected value or values. |
| multiple | boolean | false | Allow multiple selection. |