Form

Native select

A styled browser select, for short lists where the platform's own picker is best.

Import

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

Usage

NativeSelect wraps a native select and adds a chevron. Fill it with NativeSelectOption and, to group, NativeSelectOptGroup. Name it with a Label whose htmlFor is its id.

import { Label } from "@booleanpress/ui/label"
import { NativeSelect, NativeSelectOption } from "@booleanpress/ui/native-select"

export function Encryption() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="encryption">Encryption</Label>
      <NativeSelect id="encryption" defaultValue="tls">
        <NativeSelectOption value="none">None</NativeSelectOption>
        <NativeSelectOption value="tls">TLS</NativeSelectOption>
      </NativeSelect>
    </div>
  )
}

It takes every attribute of a native select, and size is default (36 px) or sm (32 px) rather than the native row count. Use defaultValue or value with onChange (the value is event.target.value). The wrapper is w-fit; widen it with a class on the select and a wrapper width. Use Select instead when options need icons, rich content or search.

Examples

Basic

A labelled select with three options.

Encryption

Sizes

default is 36 px high, sm is 32 px.

Groups

NativeSelectOptGroup labels sets of options; a disabled first option is the prompt.

Mailer

Disabled

The select and its chevron dim; it leaves the tab order.

Region

Invalid

aria-invalid draws the error border; aria-describedby reads the message with the name.

Priority

Choose a priority.

Accessibility

Semantics: A native select (role combobox, or listbox with a row count) with native option and optgroup. The chevron is aria-hidden.
Labels: Name every select: a Label with htmlFor, or aria-label. Put errors in aria-describedby.
Focus: It is in the tab order unless disabled. The focus ring shows on keyboard focus.
Known limits: The open list is drawn by the browser and the operating system, so its look cannot be themed beyond Canvas colours.

Keyboard

Keyboard
Key	Behaviour
`Arrow DownArrow Up`	Changes the chosen option, or moves through the list when it is open. The browser decides which.
`AltArrow Down`	Opens the list, where the browser supports it.
`Letters`	Jump to the next option that starts with the typed text.

API

NativeSelect

Renders a select and passes it every other prop.

NativeSelect props
Prop	Type	Default	Description
`size`	`"default" \| "sm"`	`default`	`default` is 36 px high; `sm` is 32 px.

NativeSelectOptGroup

Renders a optgroup and passes it every other prop.

NativeSelectOption

Renders a option and passes it every other prop.

Every part takes className, merged with its defaults by cn(), and ref, which reaches the element it renders.

Data attributes: data-slot="native-select-wrapper" (NativeSelect), data-slot="native-select-optgroup" (NativeSelectOptGroup), data-slot="native-select-option" (NativeSelectOption), and data-size.

Theming

The tokens its classes read. Change their values in your theme, and it follows.

Theme tokens
Token	Used for
`--control`	border
`--destructive`	border, focus ring
`--input`	border, background
`--muted-foreground`	text
`--primary`	background
`--primary-foreground`	text
`--ring`	border, focus ring