NativeSelect

A native select is the platform <select> with the field styling of Input and a chevron drawn as a background image. It takes plain <option> children and the browser's own picker, so it works everywhere and needs no portal. For custom option rendering use Select.

import NativeSelect from '@zuilib/primitives/native-select'

Variants

outline is the default field: --input border on --background. ghost has no border until it is hovered or focused.

Loading example

Sizes

sm, md and lg read --control-height-*, --control-padding-x-* and the matching --text-* step. The chevron is --spacing * 6 wide and sits half a control padding from the right edge; the text gets padding plus the chevron on the right so it never runs under it.

Loading example

Invalid and disabled

invalid paints the border and focus ring with --danger and sets aria-invalid. disabled lowers the opacity and blocks the pointer.

Loading example

In a Field

Field generates the id and wires Label, FieldDescription and FieldError to the select. Its invalid becomes the select's default invalid, so one prop on the field paints the border and sets aria-invalid.

Loading example

Props

NativeSelectProps extends the native <select> attributes (value, defaultValue, onChange, name, disabled, multiple, …) minus size, with:

Prop	Type	Default	Description
variant	'outline' | 'ghost'	'outline'
invalid	boolean	Field invalid	Sets aria-invalid / data-invalid and the danger styles
size	'sm' | 'md' | 'lg'	'md'
fullWidth	boolean	false	w-full on the select
className	string	—	Merged last onto the native select

Slots

Slot	Element	Notes
[data-slot="native-select"]	select	Root. Also data-invalid, data-disabled, data-focus, data-hover

Tokens

Token	Used for
--control-height-sm/md/lg, --control-padding-x-sm/md/lg	Box per size and chevron inset
--spacing	Chevron width (* 6)
--input, --background, --foreground	Outline border, surface, text
--ring, --danger	Focus ring, invalid state
--radius-md	Corner radius
--duration-fast	Colour transition

Accessibility

• A real <select>: keyboard (arrows, type-ahead, Space/Enter to open) and the platform picker come for free.
• Label it with a Field Label, a <label htmlFor> or aria-label.
• invalid sets aria-invalid; inside a Field the FieldError is reached through aria-describedby.
• disabled uses the native attribute and inherits from an enclosing Fieldset / Field.
• The chevron is a background image, so it is never read or focusable.

Related

• Select: custom-rendered options in a popover.
• Combobox: a select you can type into.
• Input: the same variants and sizes on a text field.
• Field: label, description and error wiring.