Svelte Component

Listboxes

Interactive listboxes that maintain selection state.

typescript 
import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

Selected: books

By default the listbox uses a native radio inputs to ensure only one item is selected at a time.

Multiple Selection

By adding the multiple property, the component uses native checkbox inputs, which allows for multi-select.

Selected: books,movies

Disabled

Use the disabled property to disable the entire listbox or each item.

html 
<ListBox ... disabled>...</ListBox>
html 
<ListBoxItem ... disabled>...</ListBoxItem>

Lead and Trail Slots

Each Listbox item supports a lead and trail slot, which can be useful for icons or actions.

html 
<ListBoxItem bind:group={valueSingle} name="books" value="books">
	<svelte:fragment slot="lead">(icon)</svelte:fragment>
	(label)
	<svelte:fragment slot="trail">(icon)</svelte:fragment>
</ListBoxItem>

Native Alternatives

Consider using the native Select element with either the size or multiple attributes set to support single or multiple selection respectively. However, please be aware that Safari (macOS) does not support all styles.