Native Select
A styled wrapper around the native HTML select element with label, description, and validation support.
Usage
Controlled
Custom Indicator
Disabled Select
Form Example
Full Width
Invalid State
Variants
With Description
With Disabled Options
With Groups
With Label
CSS Classes
Base Classes
.native-select- Base outer wrapper (label + trigger + description).native-select__trigger- Positioned wrapper containing the select and indicator.native-select__select- The nativeselectelement with field styling.native-select__indicator- Chevron icon positioned inside the trigger
Variant Classes
.native-select--secondary- Secondary variant with default background and no shadow
Modifier Classes
.native-select--full-width- Makes the wrapper full-width.native-select__trigger--full-width- Makes the trigger full-width
Interactive States
- Hover:
:hoveror[data-hovered="true"]on.native-select__select(background and border change) - Focus:
:focuson.native-select__select(border and background change) - Focus visible:
:focus-visibleor[data-focus-visible="true"]on.native-select__select(focus ring) - Invalid:
[data-invalid="true"]or[aria-invalid="true"]on.native-select(error styling) - Disabled:
:disabledor[aria-disabled="true"]on.native-select__select(reduced opacity, no pointer events)
API Reference
NativeSelect
The root component. Wraps the trigger, label, and description.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'primary' | Visual style variant |
fullWidth | boolean | false | Whether the select takes the full width of its container |
children | ReactNode | - | Trigger, label, and description elements |
Also supports all native div HTML attributes.
NativeSelect.Trigger
Wrapper containing the native select element and the indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS class applied to the select element |
wrapperClassName | string | - | Additional CSS class applied to the wrapper div |
children | ReactNode | - | Option, OptGroup, and Indicator elements |
Also supports all native select HTML attributes (value, onChange, disabled, etc.).
NativeSelect.Indicator
Chevron icon inside the trigger. Renders a default down-chevron SVG when no children are provided.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Custom indicator icon |
Also supports all native span HTML attributes.
NativeSelect.Option
A native option element.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Option label text |
Also supports all native option HTML attributes (value, disabled, etc.).
NativeSelect.OptGroup
A native optgroup element for grouping options.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Option elements |
Also supports all native optgroup HTML attributes (label, disabled, etc.).