Listboxes

Svelte Component

Interactive listboxes that maintain selection state.

@skeletonlabs/skeleton
Source Code
View Page Source
Accessibility Reference

Examples

Selected: books

Selected: books,movies

Getting Started

Single Selection

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

typescript 
let valueSingle: string = 'books';
html 
<ListBox>
	<ListBoxItem bind:group={valueSingle} name="books" value="books">Books</ListBoxItem>
	<ListBoxItem bind:group={valueSingle} name="movies" value="movies">Movies</ListBoxItem>
	<ListBoxItem bind:group={valueSingle} name="television" value="television">Television</ListBoxItem>
</ListBox>

Multiple Selection

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

typescript 
let valueMultiple: string[] = ['books', 'movies'];
html 
<ListBox multiple>...</ListBox>

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 style values.