Listboxes

Svelte Component

Interactive listboxes that maintain selection state.

@skeletonlabs/skeleton
View Source
Doc Source
Accessibility Reference

Examples

Single Selection
  • Item 1
  • Item 2
  • Item 3

Selected: 1

Multi-Selection
  • Item A
  • Item B
  • Item C

Selected: A,B

Usage

Single Value

Define a writable store with a singular value of any type, then add a value prop to each child.

typescript 
import { writable, type Writable } from 'svelte/store';
typescript 
const storeSingle: Writable<number> = writable(1);
html 
<ListBox selected="{storeSingle}" label="Single Selection">
	<ListBoxItem value={1}>Selection Example 1</ListBoxItem>
	<ListBoxItem value={2}>Selection Example 2</ListBoxItem>
</ListBox>

Multiple Values

Create a writable with an array of values.

typescript 
import { writable, type Writable } from 'svelte/store';
typescript 
let storeMultiple: Writable<any[]> = writable(['A', 'B']);
html 
<ListBox selected={storeMultiple} label="Multi-Selection">
	<ListBoxItem value={'A'}>Item A</ListBoxItem>
	<ListBoxItem value={'B'}>Item B</ListBoxItem>
	<ListBoxItem value={'C'}>Item C</ListBoxItem>
</ListBox>