Native Select
Styled HTML select element with option groups. Zero JS — best for mobile forms.
Install
Import path
Examples
Disabled
Add the disabled prop to the NativeSelect component to disable the select.
Groups
Use NativeSelectOptGroup to organize options into categories.
Invalid
Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
NativeSelect, NativeSelectOptGroup, NativeSelectOption,
} from "@codefast/ui/native-select";
<NativeSelect value={v} onChange={(e) => setV(e.target.value)}>
<NativeSelectOption value="a">A</NativeSelectOption>
</NativeSelect>
API reference
Props for each part of the component. All native element props are also forwarded.
NativeSelect
A styled native <select>. Forwards all native select props.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onChange | string / (event) => void | — | Standard controlled select props. |
| disabled | boolean | false | Disables the control. |
NativeSelectOptGroup / NativeSelectOption
| Prop | Type | Default | Description |
|---|---|---|---|
| label / value | string | — | Group heading, and each option’s submitted value. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- It’s a real <select> — full native keyboard and screen-reader support, zero JS.
- Best for mobile and long lists where the OS picker is ideal.
- Pair with a Label via htmlFor / id.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use on mobile forms and when you want the native picker.
- Group long option lists with opt-groups.
Don’t
- Don’t use it when you need custom option rendering — use Select.
- Don’t omit a label.