Native Select

The browser's own select, styled to match the rest of the form.

Country

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add native-select

Dependencies

What add native-select installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

Examples

3 examples · 1 component

Country

With a placeholder

A disabled empty option asks for a choice; required blocks submit until one is made.

Time zone

Grouped options

optgroup labels are announced with each option.

Plan

Choose a plan to continue.

Region

Invalid and disabled

The error is linked text; the disabled field dims with its chevron.

API reference

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`NativeSelect` All <select> props (name, value/defaultValue, onChange, required, disabled). Width follows the parent.	`select`	—
`multiple` A list box instead of a dropdown; the chevron is hidden.	`boolean`	`false`
`aria-invalid` Destructive border, like Input.	`boolean`	—
`NativeSelectOption / NativeSelectOptGroup` Plain elements; optgroup takes a label.	`option / optgroup`	—

States

The states that apply to this component and their visual treatment.

State	Treatment
Rest	Input border and a chevron at the end.
Focus visible	2 px outline merged with the border.
Invalid	aria-invalid turns the border destructive.
Disabled	Field and chevron at 50% opacity; not focusable.

Accessibility

It is a real <select>: keyboard, typeahead, screen readers and the phone's own picker work without extra code.

Label it with a visible Label (htmlFor/id). A disabled first option with an empty value works as a placeholder and fails required validation until something is chosen.

Invalid state is the destructive border plus an error linked with aria-describedby.

The option list is drawn by the browser and follows the theme through color-scheme; it cannot be restyled, so use Select for icons or rich options.

Server-safe: no client JavaScript.