# Combobox

A searchable input with a list of options.

Group: Forms

## Import

```tsx
import { Combobox } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function ComboboxDemo() {
  const [items, setItems] = useState(fruits)

  return (
    <Combobox.Root
      width="64"
      collection={createListCollection({ items })}
      onInputValueChange={(details) =>
        setItems(fruits.filter((f) => f.toLowerCase().includes(details.inputValue.toLowerCase())))
      }
    >
      <Combobox.Control>
        <Combobox.Input placeholder="Cari buah..." />
        <Combobox.IndicatorGroup>
          <Combobox.ClearTrigger />
          <Combobox.Trigger />
        </Combobox.IndicatorGroup>
      </Combobox.Control>
      <Portal>
        <Combobox.Positioner>
          <Combobox.Content>
            <Combobox.Empty>Nggak ketemu.</Combobox.Empty>
            {items.map((item) => (
              <Combobox.Item key={item} item={item}>
                <Combobox.ItemText>{item}</Combobox.ItemText>
                <Combobox.ItemIndicator />
              </Combobox.Item>
            ))}
          </Combobox.Content>
        </Combobox.Positioner>
      </Portal>
    </Combobox.Root>
  )
}
```