native-select

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/native-select/NativeSelect.astro directly.
3/**
4 * @component NativeSelect
5 * @title Native Select
6 * @description A styled native HTML select element with consistent design system integration.
7 *
8 * @preview
9 * <NativeSelect class="w-[200px]">
10 *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
11 *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
12 *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
13 *   <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
14 * </NativeSelect>
15 *
16 * @usage
17 *
18 * ```astro nocollapse
19 * ---
20 * import {
21 *   NativeSelect,
22 *   NativeSelectOption,
23 *   NativeSelectOptGroup,
24 * } from '@bejamas/ui/components/native-select';
25 * ---
26 *
27 * <NativeSelect>
28 *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
29 *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
30 *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
31 * </NativeSelect>
32 * ```
33 *
34 * ### Native Select vs Select
35 *
36 * Use **NativeSelect** when you need standard browser form behavior — native validation, mobile-optimized pickers, and zero JavaScript. Use **Select** when you need a custom-styled dropdown with keyboard navigation, grouped items, and rich content.
37 *
38 * @examples
39 *
40 * ### With Groups
41 *
42 * <NativeSelect class="w-[200px]">
43 *   <NativeSelectOptGroup label="Fruits">
44 *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
45 *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
46 *   </NativeSelectOptGroup>
47 *   <NativeSelectOptGroup label="Vegetables">
48 *     <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
49 *     <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
50 *   </NativeSelectOptGroup>
51 * </NativeSelect>
52 *
53 * ### Sizes
54 *
55 * <div class="flex flex-col items-start gap-4 sm:flex-row">
56 *   <NativeSelect class="w-[180px]" size="sm">
57 *     <NativeSelectOption value="">Small (h-8)</NativeSelectOption>
58 *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
59 *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
60 *   </NativeSelect>
61 *   <NativeSelect class="w-[180px]" size="default">
62 *     <NativeSelectOption value="">Default (h-9)</NativeSelectOption>
63 *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
64 *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
65// … truncated