Select

Usage

<Select
	label="Fruit"
	name="fruit"
	options={[
		{ value: '', label: '' },
		{ value: 'apple', label: 'Apple', selected: true },
		{ value: 'apricot', label: 'Apricot' },
		{ value: 'banana', label: 'Banana' },
	]}
/>
<Select
	label="Fruit"
	variant="filled"
	name="fruit"
	options={[
		{ value: '', label: '', selected: true },
		{ value: 'apple', label: 'Apple' },
		{ value: 'apricot', label: 'Apricot' },
		{ value: 'banana', label: 'Banana' },
	]}
/>

Disabled

<Select
	label="Fruit"
	name="fruit"
	disabled
	options={[{ value: '', label: '' }]}
/>
<Select
	label="Fruit"
	variant="filled"
	name="fruit"
	disabled
	options={[{ value: '', label: '', selected: true }]}
/>

Validation

<form>
	<Select
		label="Genre"
		name="genre"
		required
		options={[
			{ value: '', label: '' },
			{ value: 'rock', label: 'Rock' },
			{ value: 'pop', label: 'Pop' },
			{ value: 'jazz', label: 'Jazz' },
		]}
	/>
	<div class="button-area">
		<Button type="submit">Send</Button>
	</div>
</form>

Multiple selection

<Select
		label="Favorite fruit"
		name="fruit"
		style="max-width: 300px"
		multiple
		options={[
			{ value: 'apple', label: 'Apple' },
			{ value: 'apricot', label: 'Apricot' },
			{ value: 'banana', label: 'Banana' },
			{ value: 'cherry', label: 'Cherry' },
			{ value: 'elderberry', label: 'Elderberry' },
			{ value: 'fig', label: 'Fig' },
		]}
	/>

Virtual list

An option uses the Intersection Observer API to improve performance. This enables lists of up to 300 options. Beyond that the Select component uses a virtual list to render the options, which has the limitation of having a fixed height. The switchover point is virtualThreshold; lower it when your options are expensive to render.

<Select
	label="Virtual list"
	name="virtual_list"
	style="max-width: 300px"
	options={[
		...Array.from({ length: 4001 }, (_, i) => ({
			value: `option${i + 1}`,
			label: `Option ${i + 1}`,
		})),
	]}
/>

Icons

<Select
	label="Favorite fruit"
	name="fruit"
	options={[
		{ value: '', label: '' },
		{ value: 'apple', label: 'Apple' },
		{ value: 'apricot', label: 'Apricot' },
		{ value: 'banana', label: 'Banana' },
	]}
>
	{#snippet start()}
		<Icon>favorite</Icon>
	{/snippet}
</Select>
<Select
	label="Favorite car"
	name="car"
	options={[
		{ value: '', label: '' },
		{ value: 'audi', label: 'Audi' },
		{ value: 'bmw', label: 'BMW' },
		{ value: 'mercedes', label: 'Mercedes' },
		{ value: 'vw', label: 'Volkswagen' },
	]}
>
	{#snippet end()}
		<Icon>favorite</Icon>
	{/snippet}
</Select>

Theming

Filled select tokens

Token	Default value
`--np-filled-select-text-field-container-shape`	`--np-shape-corner-extra-small`
`--np-filled-select-text-field-container-color`	`--np-color-surface-container-highest`

Filled select example

<Select
	variant="filled"
	label="Filled"
	options={[
		{ value: '', label: '', selected: true },
		{ value: 'apple', label: 'Apple' },
		{ value: 'apricot', label: 'Apricot' },
		{ value: 'banana', label: 'Banana' },
	]}
	--np-filled-select-text-field-container-shape="0"
	--np-filled-select-text-field-container-color="var(--np-color-surface-container)"
	--np-color-primary="var(--np-color-tertiary)"
/>

Outlined select tokens

Token	Default value
`--np-outlined-select-text-field-container-shape`	`--np-shape-corner-extra-small`

Sizing tokens

These apply to both variants and control how wide the select is allowed to get.

Token	Default value
`--np-select-min-width`	`210px`
`--np-select-max-width`	`100%`

Outlined select example

<Select
	options={[
		{ value: '', label: '', selected: true },
		{ value: 'apple', label: 'Apple' },
		{ value: 'apricot', label: 'Apricot' },
		{ value: 'banana', label: 'Banana' },
	]}
	label="Outlined"
	--np-outlined-select-text-field-container-shape="0"
	--np-color-primary="var(--np-color-tertiary)"
/>

API

Attributes

Attribute	Type	Default	Description
`options`	`SelectOption[]`	`[]`	Required. The options to choose from. See the table below for their shape.
`variant`	`'outlined' \| 'filled'`	`'outlined'`	Defines the visual style of the select component.
`label`	`string \| undefined`	`undefined`	Specifies the floating label for the select field.
`start`	`Snippet \| undefined`	`undefined`	Icon displayed at the beginning of the select field.
`end`	`Snippet \| undefined`	`undefined`	Replaces the arrow
`supportingText`	`string`	`''`	Provides additional information below the select, such as usage instructions.
`issues`	`{ message: string }[]`	`undefined`	Displays error messages below the select. Optimized to use with remote form field issues.
`required`	`boolean`	`false`	Indicates whether the select field is required.
`noAsterisk`	`boolean`	`false`	Disables the asterisk on the floating label when the select field is required.
`disabled`	`boolean`	`false`	Indicates whether the select field is disabled.
`multiple`	`boolean \| null \| undefined`	`undefined`	Allows multiple selections when set to true.
`clampMenuWidth`	`boolean`	`false`	Restricts the menu width to match the width of the select component.
`virtualThreshold`	`number`	`300`	Number of options from which on the menu renders as a virtual list.
`...attributes`	`HTMLAttributes<HTMLDivElement>`		Attributes are passed to the component container.

SelectOption

Property	Type	Description
`value`	`string \| number`	Required. Value submitted with the form.
`label`	`string`	Required. Text shown for the option.
`selected`	`boolean \| null \| undefined`	Preselects the option, and is the state a form reset returns it to.
`disabled`	`boolean \| undefined`	Makes the option non-selectable.

Bindables

Attribute	Type	Description
`element`	`HTMLElement`	A reference to the root DOM element of the component. This variable is bound using `bind:this`, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.
`value`	`any`	Value of the underlying select