# Native Select
{"Select a fruit"} {"Apple"} {"Banana"} {"Cherry"}
```astro --- --- Select a fruit Apple Banana Cherry ``` ## Installation ```bash bunx bejamas add native-select ``` ```bash npx bejamas add native-select ``` ```bash pnpm dlx bejamas add native-select ``` ```bash yarn dlx bejamas add native-select ``` ## Usage ```astro nocollapse --- --- Select a fruit Apple Banana ``` ### Native Select vs Select 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. ## Props | Prop | Type | Default | |---|---|---| | class | `string` | `""` | | size | `"sm" \| "default" \| "lg"` | `"default"` | ## Examples ### With Groups
{"Apple"} {"Banana"} {"Carrot"} {"Broccoli"}
```astro --- --- Apple Banana Carrot Broccoli ``` ### Sizes
{"Small (h-8)"} {"Apple"} {"Banana"} {"Default (h-9)"} {"Apple"} {"Banana"} {"Large (h-10)"} {"Apple"} {"Banana"}
```astro --- ---
Small (h-8) Apple Banana Default (h-9) Apple Banana Large (h-10) Apple Banana
``` ### Disabled
{"Apple"} {"Banana"}
```astro --- --- Apple Banana ``` ### Invalid
{"Select a fruit"} {"Apple"} {"Banana"}
```astro --- --- Select a fruit Apple Banana ```