Combobox

Searchable dropdown combining a text input with a filterable list of options.

Example

Selected: none

Props

Combobox.Root

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls dropdown visibility (bindable)
`value`	`string`	`''`	Selected value (bindable)
`children`	`Snippet`	—	Input, trigger, and content

Combobox.Input

Prop	Type	Default	Description
`placeholder`	`string`	—	Input placeholder text
`class`	`string`	—	Additional CSS classes

Combobox.Trigger

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Trigger element

Combobox.Content

Prop	Type	Default	Description
`sideOffset`	`number`	`4`	Distance from trigger in px
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	List items

Combobox.Item

Prop	Type	Default	Description
`value`	`string`	—	Option value (required)
`label`	`string`	—	Display label
`disabled`	`boolean`	—	Disables the option
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Item content

Combobox.Group / Combobox.GroupHeading

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Group content / heading text

Usage

<script>
  import { Combobox, Button } from '@chrissnell/chonky-ui';

  let open = $state(false);
  let value = $state('');

  const options = ['Apple', 'Banana', 'Cherry'];
</script>

<Combobox.Root bind:open bind:value>
  <Combobox.Input placeholder="Search..." />
  <Combobox.Trigger>
    <Button size="sm">Open</Button>
  </Combobox.Trigger>
  <Combobox.Content>
    {#each options as opt}
      <Combobox.Item value={opt.toLowerCase()} label={opt}>
        {opt}
      </Combobox.Item>
    {/each}
  </Combobox.Content>
</Combobox.Root>