Native Select

Platform-drawn dropdown wrapped in bloom styling. Borderless fill deepens on focus and the neutral ring keeps the OS-native picker's muscle memory while the control stays on-token.

Usage

Fruit

native-select.svelte

<script lang="ts">
	import { cn, type WithElementRef } from '$lib/utils.js';
	import type { HTMLSelectAttributes } from 'svelte/elements';
	import { Icon } from '$lib/components/ui/icon';

	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes>, 'size'> & {
		size?: 'sm' | 'default';
	};

	let {
		ref = $bindable(null),
		value = $bindable(),
		class: className,
		size = 'default',
		children,
		...restProps
	}: NativeSelectProps = $props();
</script>

<div
	class={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}
	data-slot="native-select"
	data-size={size}
>
	<select
		bind:value
		bind:this={ref}
		data-slot="native-select-wrapper"
		data-size={size}
		class="h-9 w-full min-w-0 appearance-none rounded-(--radius-control) bg-input/30 py-1 pr-8 pl-3 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground hover:bg-input/50 focus-visible:bg-input/50 focus-visible:ring-(length:--ring-width) focus-visible:ring-border disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-(length:--ring-width) aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:aria-invalid:ring-destructive/40"
		{...restProps}
	>
		{@render children?.()}
	</select>
	<Icon
		name="arrow-down-s-line"
		size="1rem"
		class="pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
		aria-hidden
		data-slot="native-select-icon"
	/>
</div>

States

Default

Small

Disabled

Invalid

native-select.svelte

<script lang="ts">
	import { cn, type WithElementRef } from '$lib/utils.js';
	import type { HTMLSelectAttributes } from 'svelte/elements';
	import { Icon } from '$lib/components/ui/icon';

	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes>, 'size'> & {
		size?: 'sm' | 'default';
	};

	let {
		ref = $bindable(null),
		value = $bindable(),
		class: className,
		size = 'default',
		children,
		...restProps
	}: NativeSelectProps = $props();
</script>

<div
	class={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}
	data-slot="native-select"
	data-size={size}
>
	<select
		bind:value
		bind:this={ref}
		data-slot="native-select-wrapper"
		data-size={size}
		class="h-9 w-full min-w-0 appearance-none rounded-(--radius-control) bg-input/30 py-1 pr-8 pl-3 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground hover:bg-input/50 focus-visible:bg-input/50 focus-visible:ring-(length:--ring-width) focus-visible:ring-border disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-(length:--ring-width) aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:aria-invalid:ring-destructive/40"
		{...restProps}
	>
		{@render children?.()}
	</select>
	<Icon
		name="arrow-down-s-line"
		size="1rem"
		class="pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
		aria-hidden
		data-slot="native-select-icon"
	/>
</div>

Grouped options

native-select.svelte

<script lang="ts">
	import { cn, type WithElementRef } from '$lib/utils.js';
	import type { HTMLSelectAttributes } from 'svelte/elements';
	import { Icon } from '$lib/components/ui/icon';

	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes>, 'size'> & {
		size?: 'sm' | 'default';
	};

	let {
		ref = $bindable(null),
		value = $bindable(),
		class: className,
		size = 'default',
		children,
		...restProps
	}: NativeSelectProps = $props();
</script>

<div
	class={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}
	data-slot="native-select"
	data-size={size}
>
	<select
		bind:value
		bind:this={ref}
		data-slot="native-select-wrapper"
		data-size={size}
		class="h-9 w-full min-w-0 appearance-none rounded-(--radius-control) bg-input/30 py-1 pr-8 pl-3 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground hover:bg-input/50 focus-visible:bg-input/50 focus-visible:ring-(length:--ring-width) focus-visible:ring-border disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-(length:--ring-width) aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:aria-invalid:ring-destructive/40"
		{...restProps}
	>
		{@render children?.()}
	</select>
	<Icon
		name="arrow-down-s-line"
		size="1rem"
		class="pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
		aria-hidden
		data-slot="native-select-icon"
	/>
</div>

API reference

Wraps a native <select>. Inherits every native HTMLSelectElement attribute via spread.

Type	Default	Description
`'default' \| 'sm'`	`'default'`	Controls height. Small is 8 units for denser toolbars.
`string \| number \| readonly string[] \| null \| undefined (bindable)`	—	Two-way bindable selected value.
`boolean`	`false`	Disables the control and drops opacity to 50%.
`'true' \| 'false'`	—	Flips the focus ring to destructive without changing layout.
`HTMLSelectElement \| null`	`null`	Two-way-bindable element reference.
`string`	—	Merged onto the wrapper via tailwind-merge.