Listboxes

Svelte Component

Interactive listboxes that maintain selection state.

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>