component

Select

The Select component presents a collapsible list of options, enabling users to choose one or more items from a dropdown menu.

Source code in GitHub Select in Storybook

Set Up #

To use the Select component, import it into your Svelte file:

Example.svelte

<script>
	import { Select } from '@sans-ui/core';
</script>

Usage #

The Select component allows users to select from multiple options presented in a dropdown list.

This is a label

Example.svelte

<script lang="ts">
	import { Select } from '@sans-ui/core';

	let popupSelect = false;
	let options = [
		{ value: '1', label: 'Option 1' },
		{ value: '2', label: 'Option 2' },
		{ value: '3', label: 'Option 3' },
		{ value: '4', label: 'Option 4' }
	];
</script>

<label class="field">
	"This is a label"
	<Select {options} placeholder="Select an option" />
</label>

Variant #

The Select component supports various color themes through the variant prop.

This is a label

Example.svelte

<script lang="ts">
	import { Select } from '@sans-ui/core';

	let options = [
		{ value: '1', label: 'Option 1' },
		{ value: '2', label: 'Option 2' },
		{ value: '3', label: 'Option 3' },
		{ value: '4', label: 'Option 4' }
	];
</script>

<label class="field">
	"This is a label"
	<Select variant="primary" {options} placeholder="Select an option" />
</label>
<label class="field">
	"This is a label"
	<Select variant="secondary" {options} placeholder="Select an option" />
</label>
<label class="field">
	"This is a label"
	<Select variant="success" {options} placeholder="Select an option" />
</label>
<label class="field">
	"This is a label"
	<Select variant="warning" {options} placeholder="Select an option" />
</label>
<label class="field">
	"This is a label"
	<Select variant="danger" {options} placeholder="Select an option" />
</label>

Size #

The size prop determines the size of the Select component.

This is sm

This is md

This is lg

Example.svelte

<script lang="ts">
	import { Button, Select } from '@sans-ui/core';

	let options = [
		{ value: '1', label: 'Option 1' },
		{ value: '2', label: 'Option 2' },
		{ value: '3', label: 'Option 3' },
		{ value: '4', label: 'Option 4' }
	];
</script>

<label class="field">
	"This is a label"
	<Select {options} size="sm" placeholder="Select an option" />
</label>
<label class="field">
	"This is a label"
	<Select {options} size="md" placeholder="Select an option" />
</label>
<label class="field">
	"This is a label"
	<Select {options} size="lg" placeholder="Select an option" />
</label>

Rounded #

Adjust the border-radius of the Select component using the rounded prop.

This is rounded none

This is rounded sm

This is rounded md

This is rounded lg

This is rounded full

Example.svelte

<script>
	import { Button } from '@sans-ui/core';
</script>

<label class="field">
	"This is a label"
	<Select {options} size="none" placeholder="Select an option" />
</label>
<label class="field">
	"This is a label"
	<Select {options} size="sm" placeholder="Select an option" />
</label>
<label class="field">
	"This is a label"
	<Select {options} size="md" placeholder="Select an option" />
</label>
<label class="field">
	"This is a label"
	<Select {options} size="lg" placeholder="Select an option" />
</label>
<label class="field">
	"This is a label"
	<Select {options} size="full" placeholder="Select an option" />
</label>

Default Selected #

Set a default selected value with the defaultSelected prop.

This is an select

Example.svelte

<script lang="ts">
	import { Button, Select } from '@sans-ui/core';

	let options = [
		{ value: '1', label: 'Option 1' },
		{ value: '2', label: 'Option 2' },
		{ value: '3', label: 'Option 3' },
		{ value: '4', label: 'Option 4' }
	];
	let defaultSelected = options[0];
</script>

<label class="field">
	"This is a label"
	<Select {options} {defaultSelected} placeholder="Select an option" />
</label>

Disabled #

The disabled prop can be used to disable the Select component.

This is a label

Example.svelte

<script lang="ts">
	import { Button, Select } from '@sans-ui/core';

	let options = [
		{ value: '1', label: 'Option 1' },
		{ value: '2', label: 'Option 2' },
		{ value: '3', label: 'Option 3' },
		{ value: '4', label: 'Option 4' }
	];
</script>

<label class="field">
	"This is a label"
	<Select {options} disabled={true} placeholder="Select an option" />
</label>

Read Only #

Use the readonly prop to make the Select component read-only.

This is a label

Example.svelte

<script lang="ts">
	import { Button, Select } from '@sans-ui/core';

	let options = [
		{ value: '1', label: 'Option 1' },
		{ value: '2', label: 'Option 2' },
		{ value: '3', label: 'Option 3' },
		{ value: '4', label: 'Option 4' }
	];
</script>

<label class="field">
	"This is a label"
	<Select {options} readonly={true} placeholder="Select an option" />
</label>

Animation #

Toggle animations for the Select component with the animation prop.

This is a label

Example.svelte

<script lang="ts">
	import { Button, Select } from '@sans-ui/core';

	let options = [
		{ value: '1', label: 'Option 1' },
		{ value: '2', label: 'Option 2' },
		{ value: '3', label: 'Option 3' },
		{ value: '4', label: 'Option 4' }
	];
</script>

<label class="field">
	"This is a label"
	<Select {options} animation={false} placeholder="Select an option" />
</label>

Invalid #

Set the invalid prop to mark the Select component as invalid, and use invalidText to display an error message.

This is a label

This is invalid text.

Example.svelte

<script lang="ts">
	import { Button, Select } from '@sans-ui/core';

	let options = [
		{ value: '1', label: 'Option 1' },
		{ value: '2', label: 'Option 2' },
		{ value: '3', label: 'Option 3' },
		{ value: '4', label: 'Option 4' }
	];
</script>

<label class="field">
	"This is a label"
	<Select
		{options}
		invalid={true}
		invalidText="This is invalid text."
		placeholder="Select an option"
	/>
</label>

Accessibility #

Support for selecting a single option.
Support for disabled options.
Support for sections.
Labeling support for accessibility.
Support for description and error message help text linked to the input via ARIA.
Support for mouse, touch, and keyboard interactions.
Tab stop focus management.

API #

Select provides APIs(Properties) that is necessary for you to configure a Select compponent.

Select Props #

Name	Type	Default Value
`id`	string \| undefined	""
`defaultSelected`	Option	undefined
`variant`	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'	'primary'
`size`	'sm' \| 'md' \| 'lg'	'md'
`options`	Option[]	[]
`label`	string	""
`required`	boolean	false
`disabled`	boolean	false
`readonly`	boolean	false
`animation`	boolean	true
`placeholder`	string	""
`invalid`	boolean	false
`invalidText`	string	""

Select Handlers #

Name	Type	Description
`on:toggle`	(open: boolean) => void	When the dropdown is opened or closed.
`on:select`	(selected: Option) => void	When an option is selected. The selected option's value is passed as an argument.
`on:close`	(open: boolean) => void	When the dropdown is closed. The dropdown's open state is passed as an argument.
`on:mousedown`	() => void	A pointing device button (usually a mouse) is pressed on an element.
`on:mouseup`	() => void	A pointing device button (usually a mouse) is released over an element.

Select Slots #

Name	Description
`base`	This slot is applied to the div element(`combobox` role).
`label`	This slot is applied to the label element.
`trigger`	This slot is applied to the button element(trigger for the dropdown).
`placeholder`	This slot is applied to the span element(placeholder).
`placeholderWrapper`	This slot is applied to the div elment(placeholder wrapper).
`listbox`	This slot is applied to the ul elment(`menu` role).
`option`	This slot is applied to the li elment(`option` role).
`optionTextWrapper`	This slot is applied to the div elment(wrapper for option's text).
`optionText`	This slot is applied to the span elment(option's text).
`invalidText`	This slot is applied to the span elment for invalid text.