Select

Select is used to pick a value from a list of options.

Single

Label

You're doing it wrong!

svelte

<script lang="ts">
	import { Select } from 'stwui';
	import { SelectOption } from 'stwui/types';

	const email = "svg-path";
	const options: SelectOption[] = [
		{
			value: 'option_1',
			label: 'Option 1'
		},
		{
			value: 'option_2',
			label: 'Option 2'
		},
		{
			value: 'option_3',
			label: 'Option 3'
		}
	];

	let value: string | undefined;
	let error: string | undefined = "You're doing it wrong!";
	$: if (value && value.length > 0) {
		error = undefined;
	} else {
		error = "You're doing it wrong!";
	}
</script>

<Select name="select-1" placeholder="Basic">
	<Select.Options slot="options">
		{#each options as option}
			<Select.Options.Option {option} />
		{/each}
	</Select.Options>
</Select>

<Select name="select-2">
	<Select.Label slot="label">Label</Select.Label>
	<Select.Leading slot="leading" data={email} />
	<Select.Options slot="options">
		{#each options as option}
			<Select.Options.Option {option} />
		{/each}
	</Select.Options>
</Select>

<Select name="select-3" {error} bind:value>
	<Select.Label slot="label">Label</Select.Label>
	<Select.Leading slot="leading" data={email} />
	<Select.Options slot="options">
		{#each options as option}
			<Select.Options.Option {option} />
		{/each}
	</Select.Options>
</Select>

Multiple

svelte

<script lang="ts">
	import { Select } from 'stwui';
	import { SelectOption } from 'stwui/types';

	const email = "svg-path";
	const options: SelectOption[] = [
		{
			value: 'option_1',
			label: 'Option 1'
		},
		{
			value: 'option_2',
			label: 'Option 2'
		},
		{
			value: 'option_3',
			label: 'Option 3'
		},
		{
			value: 'option_4',
			label: 'Option 4'
		},
		{
			value: 'option_5',
			label: 'Option 5'
		},
		{
			value: 'option_6',
			label: 'Option 6'
		}
	];
</script>

<Select name="select-4" placeholder="Basic" multiple>
	<Select.Options slot="options">
		{#each multipleOptions as option}
			<Select.Options.Option {option} />
		{/each}
	</Select.Options>
</Select>

Select Props

name	string
error	string \| undefined
placeholder	string \| undefined
value	SelectOption \| undefined
multiple	boolean	false
visible	boolean	false
optionLabel	string	label
optionValue	string	value
closeOnSelect	boolean	true

Select Slots

label	<Select.Label slot="label" />
leading	<Select.Leading slot="leading" />
options	<Select.Options slot="options" />

Select.Label Slots

default

Select.Leading Props

data	string (IconData)
viewBox	string	0 0 24 24
size	string	24px
width	string	24px
height	string	24px
color	string	currentColor
stroke	string \| undefined
fill	string	currentColor

Select.Options Slots

default

Select.Options.Option Props

option

string