Select

Allow users to chooe from a list of options.

<script lang="ts">
	import { Select, SelectContent, SelectOption, SelectTrigger, SelectValue } from 'lithesome';
	import { Button, cn } from '$site/index.js';
	import { CheckIcon, ChevronDownIcon } from 'lucide-svelte';
	import { scale } from 'svelte/transition';

	let { multiple = false }: { multiple: boolean } = $props();

	const options = [
		{ value: 'aang', label: 'Avatar Aang' },
		{ value: 'zuko', label: 'Firelord Zuko' },
		{ value: 'sokka', label: 'Councilman Sokka' },
		{ value: 'katara', label: 'Katara', disabled: true },
		{ value: 'toph', label: 'Greatest Earthbender Alive' },
		{ value: 'iroh', label: 'Uncle Iroh' },
		{ value: 'azula', label: 'Firebending Prodigy' }
	];
	let value = $state(multiple ? ['aang'] : 'aang');
</script>

<Select bind:value>
	<SelectTrigger>
		<Button variant="primary" class="w-[250px] max-w-[250px] justify-start truncate text-left">
			<SelectValue placeholder="Select an option..." class="flex-1 truncate" />
			<ChevronDownIcon class="size-6" />
		</Button>
	</SelectTrigger>
	<SelectContent
		sameWidth
		class={cn(
			'origin-top translate-y-1 rounded-xl border p-2 shadow-xl backdrop-blur ',
			'border-neutral-300 bg-white shadow-neutral-200',
			'dark:border-neutral-700 dark:bg-neutral-900 dark:shadow-[#111]'
		)}
		transition={[scale, { start: 0.8, duration: 150 }]}
	>
		{#each options as { value, label, disabled } (value)}
			<SelectOption
				{value}
				{disabled}
				class={({ hovered, selected }) =>
					cn(
						disabled ? 'text-black/40 line-through dark:text-white/30' : '',
						hovered ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white' : '',
						selected ? 'text-teal-500' : '',
						'flex w-full items-center gap-2 truncate rounded-md px-3.5 py-2.5 text-sm'
					)}
			>
				{#snippet children({ selected })}
					<div class="flex-1 text-left">{label}</div>
					{#if selected}
						<CheckIcon class="size-4" />
					{/if}
				{/snippet}
			</SelectOption>
		{/each}
	</SelectContent>
</Select>

<span class="pointer-events-none absolute bottom-2 right-2 select-none text-xs opacity-40">Value: {value}</span>

API Reference

Select

Prop	Type	Description
`value` *	`JsonValue` `Default: ——`	The selected value of the available options.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`visible`	`boolean`	Whether or not the dropdown component is visible or not.

Data attribute	Value	Description
`data-select`	`''`	The base data attribute, can be used for styling.
`data-state`	`'opened' \| 'closed'`	Whether or not the dropdown component is visible or not.

Event	Param & Return	Description
`onChange`	`(value: JsonValue)` `void`	Fires any time a new option is selected.

SelectTrigger

This component is a child of Select

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`visible`	`boolean`	Whether or not the content dropdown component is visible or not.

Data attribute	Value	Description
`data-selecttrigger`	`''`	The base data attribute, can be used for styling.

SelectContent

This component is a child of Select

Prop	Type	Description
`placement`	`Placement` `Default: bottom`	The FloatingUI placement string.
`constrainViewport`	`boolean` `Default: false`	Keeps the content dropdown from ever growing outside of the viewport.
`sameWidth`	`boolean` `Default: false`	Makes the content dropdown the same width as the trigger.
`portalTarget`	`strng \| HTMLElement` `Default: 'body'`	The target position for the content dropdown to be mounted.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`transition`	`Transition` `Default: undefined`	The svelte transition you wish to use. View transition api for more info.

Child prop	Type	Description
`visible`	`boolean`	Whether or not the content dropdown component is visible or not.

Data attribute	Value	Description
`data-selectcontent`	`''`	The base data attribute, can be used for styling.

SelectArrow

This component is a child of SelectContent

Prop	Type	Description
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.

Data attribute	Value	Description
`data-selectarrow`	`''`	The base data attribute, can be used for styling.
`data-side`	`'top' \| 'right' \| 'bottom' \| 'left'`

SelectOption

This component is a child of SelectContent

Prop	Type	Description
`value` *	`JsonValue` `Default: ——`	The value of the option.
`label`	`string` `Default: ——`	The label of the option. If this is not passed, the text content of the option will be used.
`disabled`	`boolean` `Default: false`	Disables the option, disallowing clicking and keyboard navigation.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLButtonElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`hovered`	`boolean`	Whether or not the option is currently being hovered, either by mouse or keyboard.
`selected`	`boolean`	If the option is the selected value.

Data attribute	Value	Description
`data-selectoption`	`''`	The base data attribute, can be used for styling.
`data-hovered`		This is only applied if the option is hovered.
`data-selected`		This is only applied if the option is selected.

Event	Param & Return	Description
`onClick`	`(e: MouseEvent)` `void`
`onMouseenter`	`(e: MouseEvent)` `void`
`onFocus`	`(e: FocusEvent)` `void`

SelectValue

Displays the selected value's label, or the placeholder if none is found.

This component is a child of Select

Prop	Type	Description
`placeholder`	`string` `Default: Select an option...`	The value to be displayed if no option is selected.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLSpanElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-selectvalue`	`''`	The base data attribute, can be used for styling.
`data-placeholder`		Only applied if the placeholder is active.

Basic Example

<script>
	import { Select, SelectTrigger, SelectContent, SelectOption, SelectArrow } from 'lithesome';
</script>

<Select>
	<SelectTrigger>
		<button>
			<SelectValue />
		</button>
	</SelectTrigger>
	<SelectContent>
		<SelectArrow />
		<SelectOption />
	</SelectContent>
</Select>

Multiple selected options

If you need to have a multiple selected at once, change the value prop to any form of an array.
The component will then detect the array and append the selected options.

<script>
	import { Select, SelectTrigger, SelectContent, SelectOption } from 'lithesome';

	let value = $state([]);
</script>

<Select bind:value>
	<SelectTrigger>
		<button></button>
	</SelectTrigger>
	<SelectContent>
		<SelectOption value="hamburger" />
		<SelectOption value="cheeseburger" />
	</SelectContent>
</Select>