ComboBox

A searchable text field with a custom suggestion list.

The ComboBox Component

Basic Usage

Code Snippet

1<script lang="ts">2		import { ComboBox, ComboBoxItem } from '$lib/components';3 4		let value = $state('');5		let open = $state(false);6	</script>7 8	<ComboBox bind:value={value} bind:open={open} placeholder="Choose assignee">9		<ComboBoxItem label="Emma Li" onclick={() => ((value = 'Emma Li'), (open = false))} />10		<ComboBoxItem label="Mina Park" onclick={() => ((value = 'Mina Park'), (open = false))} />11	</ComboBox>

Examples

Helper Copy

Use helper text when the choice affects workflow or delivery.

Choose the launch surface that should receive this campaign.