Native Select

Use native-select when you want browser-native dropdown behavior with design system styling. Prefer custom Select for rich animated menus. Compose Root with Option and optional OptGroup.

1<script lang="ts">
2	import * as NativeSelect from '~/components/native-select';
3</script>
4
5<NativeSelect.Root>
6	<NativeSelect.Option value="">Select status</NativeSelect.Option>
7	<NativeSelect.Option value="todo">Todo</NativeSelect.Option>
8	<NativeSelect.Option value="in-progress">In Progress</NativeSelect.Option>
9	<NativeSelect.Option value="done">Done</NativeSelect.Option>
10	<NativeSelect.Option value="cancelled">Cancelled</NativeSelect.Option>
11</NativeSelect.Root>