Native Select
@/components/kamod-ui/native-select
Installation
Import NativeSelect, NativeSelectOption, and optionally NativeSelectOptGroup from `@/components/kamod-ui/native-select`.
pnpm add @kamod-ch/uiUsage
Use NativeSelect for forms that should use the platform picker on mobile. Pair with Label and `aria-invalid` for accessible validation. Prefer the custom Select when you need search, portals, or rich option content.
import { NativeSelect } from "@/components/kamod-ui/native-select";<NativeSelect />Default
Pair with Label and `id` / `for` for a visible field name. Use `required` with an empty first option so the placeholder uses theme colors (`invalid:text-muted-foreground`) instead of faint browser styling for disabled options.
Groups
Use NativeSelectOptGroup to organize options into categories.
Disabled
Disable the whole control or individual options.
Invalid
Use `aria-invalid` with a visible error message for validation feedback.
Please select a framework.
Size
Use the `size` prop for compact or larger touch targets.
Native Select vs Select
Choose NativeSelect for platform-native pickers and simple forms. Use the custom Select component when you need search, grouped virtualized lists, or rich option UI.
When to use which
- NativeSelect — straightforward controls, native mobile sheets, minimal bundle cost.
- Select — searchable options, custom styling inside the list, or alignment with other overlay primitives.
API Reference
Props, slots and variants for this component.
Native Select
Native Select component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| size | "sm" | "md" | "lg" | "md" |
| disabled | boolean | false |
| defaultValue | string | undefined |
| name | string | undefined |
| id | string | undefined |
| aria-invalid | boolean | false |
| icon | ComponentChildren | chevron SVG |
| class | string | undefined |
| … | native <select> attributes | — |
Accessibility Notes
Associate selects with Label using `id` / `for`. For placeholders, prefer `required` with an empty first option so `:invalid` maps to readable `text-foreground/85` on the control; use a disabled first option only when you must block re-selecting the placeholder. Announce errors with nearby text and `aria-invalid` on the select.