Combobox

A filterable list of items that supports selection.

Choose your favourite book

Changing Colors

You can update the active styles with the activeStyle prop.

<Combobox
    {items}
    label="Choose your favourite book"
    placeholder="Favourite book"
    bind:selected
    width="w-64"
    activeStyle="secondary-500/80"
/>

Adding a Select Icon

You can add a select icon with the selectIcon prop.

Choose your favourite book

The debounce time represents the time taken in between a key stroke in the input field and the search taking place. If the debounce time is 1 second, then a search will only take place if there has been no keyboard inputs for 1 second. For a larger list of items this might help improve performance, since it avoids too many searches from happening.

Choose your favourite book

API

Props

Combobox

   
label
:
  string
Set the label of the combobox.

hideLabel

boolean

false

Hide label. The hidden label is still available to screen readers.

selected

A writable store that can be used to get or update the selected item.

items

Pass the list of items that are available as options. Individual items can be disabled. Check the ComboboxItem type for more details.

defaultSelected

| null

null

Set the default selected item.

placeholder

string

Set the input placeholder.

preventScroll

boolean

false

Whether or not to prevent scrolling of the document when the combobox is open.

noResultsMessage

string

'No results found'

Set the message that shows when no result is returned from a search.

defaultOpen

boolean

false

Whether the combobox is open by default or not.

loop

boolean

false

Whether or not the focus should loop back to the first item when the last item is reached.

debounce

number

The debounce time in milliseconds for the input value. This represents the time taken in between a key stroke in the input field and the search taking place. For a larger list of items it might improve performance to increase the debounce time, to avoid too many searches.

selectIcon

string

Set the select icon if you want one.

labelStyle

string

'text-sm font-medium text-surface-900-50'

Set the label styles.

inputStyle

string

'surface-50-800 border-1 border-surface-400/80'

Set the input styles.

activeStyle

string

'primary-500/80'

Set the active item styles.

width

string

Set the width of the input.

comboboxBgStyle

string

'surface-50-500'

Set the background styles of the opened combobox.

comboboxBorderStyle

string

'shadow-lg shadow-surface-500/50-300/50'

Set the border styles of the opened combobox.

noResultStyle

string

Set the style of the no result message.

Combobox

Changing Colors

Adding a Select Icon

Debounce

API

Props

Combobox