---
title: Listbox (Select)
---

<script>
  import { Listbox } from 'slender-ui'
  import { ComponentContainer, VariantSelector, ColorSelector } from '$lib'

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

  let loading = false

  let color

  let variant

  let icon = ''
</script>

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

<ComponentContainer>
  <Listbox {options} class="w-44" {color} {variant} />

  <div slot="code">

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

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

<Listbox {options} class="w-44" color="primary" />
```

  </div>
</ComponentContainer>

<div class="not-prose relative flex mt-3 space-x-6">
  <ColorSelector bind:color />

  <VariantSelector bind:variant />
</div>