Svelte Component


Interactive listboxes that maintain selection state.

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


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

Lead and Trail Slots

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

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

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.