elements
Manual UI Templates NativeSelect

NativeSelect

elements man ui/templates/native-select

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

Example
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" }]} />

Parts

Part What it is
.native-select The wrapper: the select and the chevron stacked in one grid cell.
.native-select-control The <select>.
.native-select-icon The chevron; ignores the pointer.

Attributes

NativeSelect

Attribute Type Default Description
value string (two-way) "" The selected value.
options { value: string; label: string; disabled?: boolean; group?: string }[] [] Options as data. Ones with a group render in an optgroup.
placeholder string "" An empty first option, dimmed while selected.
size "sm" | "md" | "lg" "md" Control height and type size.
name string "" Form field name.
invalid boolean false aria-invalid and the danger border.
disabled boolean false Native disabled.
required boolean false An empty value blocks the form.
block boolean false Full width instead of the longest option's width.
class string "" Extra classes on the wrapper.
attrs Record<string, string | number | boolean | undefined> {} Attributes for the <select>: id, autocomplete, aria-*.
onchange (e: Event) => void () => {} A new option was chosen.

NativeSelectOption

Attribute Type Default Description
value string (required) The option's value.
disabled boolean false Not selectable.

NativeSelectOptGroup

Attribute Type Default Description
label string (required) The group heading.
disabled boolean false Disables every option in the group.

Slots

Slot Part Content
default NativeSelect <option>, <NativeSelectOption> or <NativeSelectOptGroup>.

Keyboard

Keys Action
Space / Enter / Alt + ArrowDown Opens the list (platform dependent).
ArrowUp / ArrowDown Changes the value.
A-Z Jumps to the next option starting with that letter.
Escape Closes the list.

Data attributes

Attribute Values On
data-size "sm" | "md" | "lg" wrapper
data-disabled present while disabled wrapper
data-invalid present while invalid select

Accessibility

  • A native <select>: screen readers, keyboards and phone pickers get the platform's own control.
  • invalid sets aria-invalid; inside a Field the field wires the label and messages.
  • The chevron is decorative and aria-hidden.

See also