Native Select

A styled browser select, with familiar keyboard and mobile behavior.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Timezone

Locked timezone

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add native-select

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Field label="Timezone">
  <NativeSelect name="timezone" defaultValue="Asia/Jakarta">
    <option value="Asia/Jakarta">Jakarta (UTC+7)</option>
    <option value="UTC">UTC</option>
  </NativeSelect>
</Field>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`size`	`sm \| md \| lg`	`md`
`value / defaultValue`	`Native select value`	`—`
`children`	`option / optgroup`	`required`

Accessibility

Uses a native select; keyboard navigation and mobile pickers follow the browser. Field supplies the label and help. Native form, required, disabled, multiple, events, and select refs are supported. The size prop controls visual size rather than native listbox row count.