Select

The Select component is a wrapper around the native <select> element.

Properties

You can use the Select component, with the following props:

Name
Default
Description
value
The selected value
options
[]
An array of options to display. Optional when using custom children.
state
default
The state of the select, which can be one of the following:
  • default
  • error
  • success
  • warning
placeholder
Placeholder text for the select.
size
medium
Size of the select:
  • x-small
  • small
  • medium
  • large
block
true
Whether the select should take the full width of its container.
disabled
false
Whether the select is disabled.
block
true
Whether the select should take the full width of its container.

Examples

Using Options

<script lang="ts">
	const roleOptions = [
		{ value: 'admin', label: 'Administrator' },
		{ value: 'editor', label: 'Editor' },
		{ value: 'viewer', label: 'Viewer' },
		{ value: 'billing', label: 'Billing Manager' }
	];
	let role = $state('admin');
</script>

<Select
	bind:value={role}
	options={roleOptions}
	placeholder="Select a role"
/>

Currently selected value:

Sizes

<Select size="x-small" options={roleOptions} placeholder="Select a role" />
<Select size="small" options={roleOptions} placeholder="Select a role" />
<Select size="medium" options={roleOptions} placeholder="Select a role" />
<Select size="large" options={roleOptions} placeholder="Select a role" />

Snippets

The Select component supports custom snippets for adding icons or other elements inside the select. Available snippets include: start and end.

<Select options={roleOptions} placeholder="Select a role">
	{#snippet start()}
		<IconSearch />
	{/snippet}
</Select>

Currently selected value:

Custom Children

For advanced use cases, you can pass custom children to the Select component instead of using the options prop. This lets you use native <option> and <optgroup> elements directly, allowing for grouped options, disabled options, or any other native select features.

<Select bind:value={region}>
	{#snippet children()}
		<option value="" disabled>Select a region</option>
		<optgroup label="Americas">
			<option value="us-east">US East</option>
			<option value="us-west">US West</option>
			<option value="ca-central">Canada Central</option>
		</optgroup>
		<optgroup label="Europe">
			<option value="eu-west">EU West</option>
			<option value="eu-central">EU Central</option>
		</optgroup>
		<optgroup label="Asia Pacific">
			<option value="ap-southeast">AP Southeast</option>
			<option value="ap-northeast">AP Northeast</option>
		</optgroup>
	{/snippet}
</Select>

Currently selected value:

Other input props

<Select 
	bind:value={value}
	placeholder="Select a role"
	options={roleOptions} 
	disabled
/>