NativeSelect

The browser's own select, styled as a control. Native pickers on phones, no script needed.

Basic

value is two-way; the placeholder is an empty first option.

Status value: none

Code

<NativeSelect value={state.status} placeholder="Select status">
  <NativeSelectOption value="todo">Todo</NativeSelectOption>
  <NativeSelectOption value="in-progress">In Progress</NativeSelectOption>
  <NativeSelectOption value="done">Done</NativeSelectOption>
  <NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>
</NativeSelect>

Usage

import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "@elements/ui/native-select";

<NativeSelect value={form.status} placeholder="Select status">
  <option value="todo">Todo</option>
  <option value="done">Done</option>
</NativeSelect>

<NativeSelect value={form.team} options={[{ value: "fe", label: "Frontend", group: "Engineering" }]} />

Examples

Groups

Options as data with a group each, or optgroups as markup.

value: none

Code

<NativeSelect value={state.department} placeholder="Select department" options={DEPARTMENTS} />

// or as markup
<NativeSelect value={state.department}>
  <NativeSelectOptGroup label="Engineering">
    <NativeSelectOption value="frontend">Frontend</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

Disabled and invalid

States change color, never size.

Code

<NativeSelect disabled value="apple">...</NativeSelect>
<NativeSelect invalid value="">...</NativeSelect>

Sizes

Heights come from the control tokens.

Code

<NativeSelect size="sm" value={state.size}>...</NativeSelect>
<NativeSelect value={state.size}>...</NativeSelect>
<NativeSelect size="lg" value={state.size}>...</NativeSelect>

Required in a form

The browser blocks the submit until a fruit is chosen.

Code

<form onsubmit={() => save(state)}>
  <NativeSelect value={state.fruit} placeholder="Pick a fruit" required block>...</NativeSelect>
  <Button type="submit" variant="primary">Save</Button>
</form>

Starting value

A value chosen before the page loads shows in the server HTML, from options data and from NativeSelectOption parts alike.

Right to left

The chevron sits at the inline end and the text keeps clear of it.

Reference NativeSelect in the manual Every part, attribute, slot, key and data attribute.