Native Select

The browser's own select, styled to match Input and Select, with option groups.

Currency

When to use

Use when: A simple choice on mobile, or where the browser's own picker is the better experience.
Avoid when: Options need icons, descriptions, or search; use Select or Combobox.

Installation

bunx shelf add native-select

The source lands in src/components/ui/native-select.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as NativeSelect from "@/components/ui/native-select";

<NativeSelect.Root aria-label="Status" defaultValue="paid">
  <NativeSelect.Option value="draft">Draft</NativeSelect.Option>
  <NativeSelect.Option value="paid">Paid</NativeSelect.Option>
</NativeSelect.Root>

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, Icons, utils
Figma: In progress. See Designers and Figma.