For a styled select component, see the Select
component.
import {
NativeSelect,
NativeSelectOptGroup,
NativeSelectOption,
} from "@/components/ui/native-select"
<NativeSelect>
<NativeSelectOption value="">Select a fruit</NativeSelectOption>
<NativeSelectOption value="apple">Apple</NativeSelectOption>
<NativeSelectOption value="banana">Banana</NativeSelectOption>
<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
<NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>
Options placed directly under NativeSelect (no NativeSelectOptGroup).
NativeSelect
├── NativeSelectOption
├── NativeSelectOption
├── NativeSelectOption
└── NativeSelectOption
Use NativeSelectOptGroup to organize options into categories.
NativeSelect
├── NativeSelectOptGroup
│ ├── NativeSelectOption
│ └── NativeSelectOption
└── NativeSelectOptGroup
├── NativeSelectOption
└── NativeSelectOption
Use NativeSelectOptGroup to organize options into categories.
Add the disabled prop to the NativeSelect component to disable the select.
Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.
- Use
NativeSelect for native browser behavior, better performance, or mobile-optimized dropdowns.
- Use
Select for custom styling, animations, or complex interactions.
To enable RTL support, see the RTL configuration guide.
The main select component that wraps the native HTML select element.
<NativeSelect>
<NativeSelectOption value="option1">Option 1</NativeSelectOption>
<NativeSelectOption value="option2">Option 2</NativeSelectOption>
</NativeSelect>
Represents an individual option within the select.
Groups related options together for better organization.
<NativeSelectOptGroup label="Fruits">
<NativeSelectOption value="apple">Apple</NativeSelectOption>
<NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelectOptGroup>