Native Select

A composed native select.

Overview

NativeSelect, NativeSelectOption, and NativeSelectOptGroup render a native select, option, and optgroup. The browser handles the menu, the keyboard, and the submitted value.

Use a plain select when the composed parts are not needed. NativeSelect is the installable composed API. A custom popup Select is not part of this library.

Preview

Customize

Disabled
Required
Multiple

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add native-select

Usage

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

export function RegionField() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="region">Region</Label>
      <NativeSelect id="region" name="region" defaultValue="in">
        <NativeSelectOptGroup label="Asia">
          <NativeSelectOption value="in">India</NativeSelectOption>
        </NativeSelectOptGroup>
        <NativeSelectOption value="us">United States</NativeSelectOption>
      </NativeSelect>
    </div>
  );
}

Examples

Basic

NativeSelect is a native select. Options are native options.

Groups

NativeSelectOptGroup is a native optgroup.

Disabled

disabled is the native state.

Required

required is the native constraint.

Multiple

multiple keeps the native list and does not force a 36px height.

In practice

Language, timezone, and date format use labelled native selects on a profile form.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
valuestring | string[]—Controlled selected value. Use with onChange.
defaultValuestring | string[]—Initial selected value for an uncontrolled select.
disabledboolean—Native disabled state.
requiredboolean—Native required constraint.
multipleboolean—Allows more than one option and lets the control grow.
classNamestring—Merged onto the select with cn.

Accessibility

NativeSelect does not add an ARIA role. A single select is a combobox. A multiple select is a list box.

  • Name it with a label and matching id, or with aria-label.
  • Keyboard behavior is the browser default.
  • disabled and required are the native states.