---
title: Combobox (Autocomplete)
---

<script>
  import { Combobox } from 'slender-ui'
  import { ComponentContainer } from '$lib'

  const options = [
    'Birch',
    'Apple',
    'Beech',
    'Alder',
    'Hawthorn',
    'Hazel',
    'Holly',
    'Rowan',
    'Willow'
  ]
</script>

For the fancy one you'll need JavaScript, otherwise it falls back to a `<datalist>`.

<ComponentContainer>
  <Combobox {options} placeholder="Search for a tree..." color="primary" />

  <div slot="code">

```svelte
<script>
  import { Combobox } from 'slender-ui'

  const options = [
    'Birch',
    'Apple',
    'Beech',
    'Alder',
    'Hawthorn',
    'Hazel',
    'Holly',
    'Rowan',
    'Willow'
  ]
</script>

<Combobox {options} placeholder="Search for a tree..." color="primary" />
```

  </div>
</ComponentContainer>