UIIcons

Native Select

A styled native browser select element for simple, accessible option selection.

For a styled select component, see the Select component.

Choose your favourite fruit.

Native Select

Installation

pnpm dlx stera-ui@latest add native-select

Composition

Simple

Options placed directly under NativeSelect (no NativeSelectOptGroup).

NativeSelect
├── NativeSelectOption
├── NativeSelectOption
├── NativeSelectOption
└── NativeSelectOption

With groups

Use NativeSelectOptGroup to organize options into categories.

NativeSelect
├── NativeSelectOptGroup
│   ├── NativeSelectOption
│   └── NativeSelectOption
└── NativeSelectOptGroup
    ├── NativeSelectOption
    └── NativeSelectOption

Examples

With Field

Choose your favourite fruit.

Native Select Field

With Option Groups

Use NativeSelectOptGroup to group related options with a label.

Native Select Groups

Sizes

sm
md
lg
xl
Native Select Sizes
SizeDescription
smSmall
mdMedium (default)
lgLarge
xlExtra large

Disabled

Contact your administrator to change your role.

Native Select Disabled

API Reference

NativeSelect

Renders a <select> inside a positioned wrapper that includes a chevron icon. Accepts all standard <select> props except size.

PropTypeDefault
size"sm" | "md" | "lg" | "xl""md"

NativeSelectOption

Renders an <option> element. Accepts all standard <option> props.

NativeSelectOptGroup

Renders an <optgroup> element. Accepts all standard <optgroup> props.