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

Validation

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

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>

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.
`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.
`...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