Native Select
Uses a real HTML select with Tinyrack field styling and browser- or platform-provided option presentation.
Contract
| Axis | Behavior |
|---|---|
| element | renders a real HTML <select> and accepts <option> and <optgroup> children |
| value | uses native value, defaultValue, and onChange behavior |
| presentation | uses Tinyrack styling while closed; the browser or platform presents the option list |
| forms | preserves name, form, required, FormData, validation, and reset behavior |
| listbox | multiple or size > 1 keeps the browser's inline listbox presentation and removes the decorative chevron |
Choose TRNativeSelect when native form behavior and a platform-familiar mobile picker matter more than a customizable popup. Choose TRSelect when you need Tinyrack-rendered groups, indicators, scroll controls, positioning, or controlled popup state.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/native-select.css';Scroll inside the code area to read long lines.
Imports
import { TRNativeSelect } from '@tinyrack/ui/components/native-select';
import { TRField } from '@tinyrack/ui/components/field';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Native listbox modes permalink
Use size to expose rows or multiple to let the native control select more than one value.
API
TRNativeSelect forwards native select attributes, refs, events, classes, and styles to the rendered <select>. It does not add a readOnly prop because HTML select elements do not support one.
| Prop | Type | Default | Description |
|---|---|---|---|
uiSize | "sm" | "md" | "lg" | "md" | Sets the closed control metrics. |
appearance | "solid" | "ghost" | "solid" | Chooses resting field chrome. |
multiple | boolean | false | Enables the native multiple-selection listbox. |
size | number | browser default | Exposes native rows; values above one use listbox presentation. |
Give the select an accessible name with TRField.Label, a native <label>, or aria-label. Use onChange={(event) => ...} and read event.currentTarget.value; for multiple selection, read selectedOptions. The open option UI is owned by the browser and operating system, so option styling is intentionally not part of the Tinyrack contract.