Select - Lithesome

Preview

Code

<script lang="ts">
	import { CheckIcon, ChevronsUpDownIcon } from '@lucide/svelte';
	import { fly } from 'svelte/transition';
	import { Select, SelectContent, SelectOption, SelectTrigger, SelectValue } from 'lithesome';
	import { Button, Container } from '$site/index.js';

	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' },
		{ value: 'iroh', label: 'Uncle Iroh' },
		{ value: 'azula', label: 'Firebending Prodigy' }
	];

	let value = $state('aang');
</script>

<Select bind:value unselectable>
	<SelectTrigger>
		{#snippet custom({ props })}
			<Button variant="secondary" class="w-[250px] justify-between" {...props}>
				<SelectValue />
				<ChevronsUpDownIcon class="size-4" />
			</Button>
		{/snippet}
	</SelectTrigger>
	<SelectContent>
		{#snippet custom({ props, state })}
			{#if state.visible}
				<div transition:fly={{ y: -5, duration: 200 }} {...props}>
					<Container bodyClass="p-0 py-3" containerClass="w-[300px] z-10">
						{#each options as { value, label, disabled }}
							<SelectOption
								{value}
								{disabled}
								class={({ hovered, selected }) => [
									'flex w-full cursor-pointer items-center gap-2 py-2 pr-6 pl-14 text-left',
									hovered && 'bg-zinc-900 text-zinc-200',
									selected && 'text-teal-500',
									disabled && 'pointer-events-none opacity-40'
								]}
							>
								{#snippet children({ selected, hovered })}
									{#if selected}
										<CheckIcon class="absolute left-6 size-4 {hovered ? 'text-zinc-200' : 'text-teal-500'}" />
									{/if}
									{label}
								{/snippet}
							</SelectOption>
						{/each}
					</Container>
				</div>
			{/if}
		{/snippet}
	</SelectContent>
</Select>

<span class="site-value">{value}</span>

Basic Example

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

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

<Select bind:value>
	<SelectTrigger>
		<SelectValue />
	</SelectTrigger>
	<SelectContent>
		<SelectOption value="item-1">Item 1</SelectOption>
		<SelectOption value="item-2">Item 2</SelectOption>
		<SelectOption value="item-3">Item 3</SelectOption>
	</SelectContent>
</Select>

Custom selected labels

If you’re using the <SelectValue /> component and want to change how the labels are rendered, simply pass the custom snippet block and access the labels via the state prop.

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

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

<Select bind:value>
	<SelectTrigger>
		<SelectValue>
			{#snippet custom({ props, state })}
				<span {...props}>
					{state.placeholderVisible ? 'Select an option...' : state.selectedLabels.join(' - ')}
				</span>
			{/snippet}
		</SelectValue>
	</SelectTrigger>
	<SelectContent>
		<SelectOption value="item-1">Item 1</SelectOption>
		<SelectOption value="item-2">Item 2</SelectOption>
		<SelectOption value="item-3">Item 3</SelectOption>
	</SelectContent>
</Select>

API Reference

<Select />

Property	Type	Description
`value`	string \| string[]	The currently selected option(s).
`unselectable`	boolean	Allows a non-array value to be unselected.
`onValueChanged`	(value: string \| string[]) => void	Fires whenever the `value` prop changes.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`visible`	boolean	The current visibility of the contents.
`disabled`	boolean	Disables the entire component tree.
`portalTarget`	HTMLElement \| string	The DOM target to mount the content to.
`floatingConfig`	FloatingConfig	The underlying FloatingUI config.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<SelectTrigger />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<SelectContent />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<SelectArrow />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<SelectOption />

Property	Type	Description
`value`	string	The value of the option.
`disabled`	boolean	Disables the option, skipping mouse/keyboard navigation and stopping events from firing.
`label`	string	The label to be display on the option and if this option is selected. If this prop is not provided, the text content of the option is used.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`hovered`	boolean	True if the option is hovered.
`selected`	boolean	True if the option is selected.

<SelectValue />

Property	Type	Description
`placeholder`	string	The value displayed when no option(s) is selected.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.
`placeholderVisible`	boolean	True if no options are selected.
`selectedLabels`	string[]	The currently selected options.