Listbox

Accessible list of selectable items with keyboard navigation. Uses native ARIA listbox/option roles.

Example

Selected: opt-1

Props

Listbox.Root

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Listbox items

Listbox.Item

Prop	Type	Default	Description
`value`	`string`	—	Item value (required)
`selected`	`boolean`	`false`	Whether the item is selected
`disabled`	`boolean`	`false`	Disables the item
`onSelect`	`(value: string) => void`	—	Callback when item is selected
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Item content

Usage

<script>
  import { Listbox } from '@chrissnell/chonky-ui';

  let selected = $state('opt-1');

  const items = [
    { value: 'opt-1', label: 'Option One' },
    { value: 'opt-2', label: 'Option Two' },
    { value: 'opt-3', label: 'Option Three' },
  ];
</script>

<Listbox.Root>
  {#each items as item}
    <Listbox.Item
      value={item.value}
      selected={selected === item.value}
      onSelect={(v) => (selected = v)}
    >
      {item.label}
    </Listbox.Item>
  {/each}
</Listbox.Root>