Select

Usage

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

Disabled

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

Validation

<form>
	<Select
		label="Genre"
		variant="outlined"
		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"
		variant="outlined"
		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 4000 options. If there are more than 4000 options, the Select component uses a virtual list to render the options. The virtual list has the limitation of having a fixed height.

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

Icons

<Select
	label="Favorite fruit"
	variant="outlined"
	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"
	variant="outlined"
	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 text field 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`

Outlined text field example

<Select
	variant="outlined"
	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
`variant`	`'outlined' \| 'filled'`	`'filled'`	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.
`error`	`boolean`	`false`	Manually set the select to error
`errorText`	`string`	`''`	Manually defined error text
`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.
`...attributes`	`HTMLAttributes<HTMLDivElement>`		Attributes are passed to the component container.

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