Skip to content

Native Select

The browser's own select, styled like Input. Phones show their native picker.

Sourcecomponents/native-select.tsx

Usage

Native Select usage
import { Field, FieldLabel } from "@/components/field";import { NativeSelect } from "@/components/native-select";
export function NativeSelectUsage() {  return (    <Field>      <FieldLabel>Country</FieldLabel>      <NativeSelect name="country" defaultValue="">        <option value="" disabled>          Choose a country        </option>        <option value="fr">France</option>        <option value="de">Germany</option>        <option value="jp">Japan</option>      </NativeSelect>    </Field>  );}

When to use

Use when

A plain choice from a short list, especially on mobile (native picker, works without JavaScript)

Don’t use when

A styled list with groups (use Select); a list long enough to search (use Combobox)