Select

A dropdown for choosing one or many values from a list. Reach for it when a native <select> cannot deliver the styling or multi-select ergonomics you need. Anatomy: Select (root) wraps a SelectTrigger (containing SelectValue) and a SelectContent popover that lists SelectItem entries. Pass the same list to items and to the SelectItems, or the closed trigger falls back to showing the raw value.

Single choice

The trigger is a field, so it takes the same bg-field surface-field treatment as an Input and resolves against whatever surface it sits on. An initial value puts that item's label in the trigger in place of the placeholder — which is what items is for: the options themselves only exist while the popover is open, so without the list the closed trigger has nothing to read but the raw value.

<div class="flex w-64 flex-col gap-3">
	<Select type="single" items={fruits}>
		<SelectTrigger>
			<SelectValue placeholder="Select a fruit" />
		</SelectTrigger>
		<SelectContent>
			{#each fruits as fruit (fruit.value)}
				<SelectItem value={fruit.value} label={fruit.label} />
			{/each}
		</SelectContent>
	</Select>

	<Select type="single" items={fruits} value="banana">
		<SelectTrigger>
			<SelectValue placeholder="Select a fruit" />
		</SelectTrigger>
		<SelectContent>
			{#each fruits as fruit (fruit.value)}
				<SelectItem value={fruit.value} label={fruit.label} />
			{/each}
		</SelectContent>
	</Select>

	<Select type="single" items={fruits} disabled>
		<SelectTrigger>
			<SelectValue placeholder="Unavailable" />
		</SelectTrigger>
		<SelectContent>
			{#each fruits as fruit (fruit.value)}
				<SelectItem value={fruit.value} label={fruit.label} />
			{/each}
		</SelectContent>
	</Select>
</div>

Multiple

type="multiple" binds value to an array. Each chosen item keeps a check while the popover is open, so the set is readable without closing it.

<div class="w-64">
	<Select type="multiple" items={fruits} value={['apple', 'orange']}>
		<SelectTrigger>
			<SelectValue placeholder="Select fruits" />
		</SelectTrigger>
		<SelectContent>
			{#each fruits as fruit (fruit.value)}
				<SelectItem value={fruit.value} label={fruit.label} />
			{/each}
		</SelectContent>
	</Select>
</div>

Long list

SelectContent caps at max-h-72 and scrolls, with use:scrollFade on the edges — a hard cut reads as the end of the list, a fade reads as there being more. An item can opt out with its own disabled.

<div class="w-72">
	<Select type="single" items={timezones}>
		<SelectTrigger>
			<SelectValue placeholder="Select a timezone" />
		</SelectTrigger>
		<SelectContent>
			{#each timezones as zone (zone.value)}
				<SelectItem
					value={zone.value}
					label={zone.label}
					disabled={zone.value === 'utc+2'}
				/>
			{/each}
		</SelectContent>
	</Select>
</div>

In a form

name puts the selection into a native form submission through a hidden input, so a Select needs no JavaScript to be part of a POST.

Favourite fruit

Used to personalise your recommendations.

<div class="w-80 space-y-2">
	<Label for="fruit">Favourite fruit</Label>
	<Select type="single" items={fruits} name="fruit" required>
		<SelectTrigger id="fruit">
			<SelectValue placeholder="Choose one" />
		</SelectTrigger>
		<SelectContent>
			{#each fruits as fruit (fruit.value)}
				<SelectItem value={fruit.value} label={fruit.label} />
			{/each}
		</SelectContent>
	</Select>
	<p class="text-muted text-xs">Used to personalise your recommendations.</p>
</div>

API

`Select`

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Select subtree (a SelectTrigger and a SelectContent).
`items`	`Array<{value: string, label: string, disabled?: boolean}>`		The full list of options, so `SelectValue` can name the selection. Without it the label is looked up from the rendered items, which only exist while the popover is open — a closed trigger would show `utc-8` where it should say `Pacific (UTC-8)`. Build the `SelectItem`s from this same array (forwarded via `...rest`).
`type`	`'single'\|'multiple'`	`'single'`	Selection mode. `single` binds `value` to a string; `multiple` binds it to an array.
`value` bindable	`string\|string[]`		The selected value(s). Bindable — a string in `single` mode, an array in `multiple` mode.
`open` bindable	`boolean`	`false`	Bindable open state of the dropdown popover.
`disabled`	`boolean`		Disables the trigger and prevents the dropdown from opening (forwarded via `...rest`).
`required`	`boolean`		Marks the field as required for native form submission (forwarded via `...rest`).
`name`	`string`		Associates the selection with a hidden input for native form submission (forwarded via `...rest`).

`SelectTrigger`

Clickable control that shows the current SelectValue and opens the SelectContent popover. Place inside a Select, wrapping a SelectValue.

Prop	Type	Description
`children` required	`import('svelte').Snippet`	Trigger content, typically a SelectValue.
`class`	`string`	Additional Tailwind classes merged onto the trigger.
`disabled`	`boolean`	Disables the trigger (forwarded via `...rest`).

`SelectValue`

Displays the selected item's label inside a SelectTrigger, or a placeholder when nothing is selected.

Prop	Type	Default	Description
`class`	`string`		Additional Tailwind classes merged onto the value text.
`placeholder`	`string`		Text shown when no value is selected (forwarded via `...rest`).

`SelectContent`

Portaled popover listing SelectItem entries. Docks near the trigger and scrolls once the list exceeds max-h-72.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		SelectItem entries to list.
`class`	`string`		Additional Tailwind classes merged onto the popover panel.
`sideOffset`	`number`	`4`	Pixel gap between the trigger and the popover.

`SelectItem`

A single selectable option inside a SelectContent. Renders a check mark when it is the current selection.

Prop	Type	Description
`class`	`string`	Additional Tailwind classes merged onto the item.
`value` required	`string`	The value committed to Select when this item is chosen.
`label`	`string`	Display label; falls back to `value` when omitted.
`disabled`	`boolean`	Excludes the item from selection (forwarded via `...rest`).