Native Select

The browser's own select, dressed as a macOS pop-up button.

@cupertinoui/native-selectRegistry JSON

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

export default function NativeSelectDemo() {
  return (
    <div className="flex items-center gap-3">
      <NativeSelect defaultValue="1min" aria-label="Turn display off">
        <NativeSelectOption value="1min">After 1 minute</NativeSelectOption>
        <NativeSelectOption value="5min">After 5 minutes</NativeSelectOption>
        <NativeSelectOption value="never">Never</NativeSelectOption>
      </NativeSelect>
      <NativeSelect size="sm" defaultValue="sf" aria-label="Font">
        <NativeSelectOptGroup label="System">
          <NativeSelectOption value="sf">SF Pro</NativeSelectOption>
          <NativeSelectOption value="ny">New York</NativeSelectOption>
        </NativeSelectOptGroup>
        <NativeSelectOptGroup label="Other">
          <NativeSelectOption value="helvetica">Helvetica Neue</NativeSelectOption>
        </NativeSelectOptGroup>
      </NativeSelect>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/native-select

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<NativeSelect defaultValue="5min">
  <NativeSelectOption value="1min">After 1 minute</NativeSelectOption>
  <NativeSelectOption value="5min">After 5 minutes</NativeSelectOption>
</NativeSelect>

Opens the system menu, which suits long lists and phones. For the macOS menu itself, use Pop-up Button (Select).

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

NativeSelect

Prop	Type	Description
`size`	`"sm" \| "default"` Default: `"default"`	20 or 24pt tall.
`className`	`string`	Extra classes, merged with the component's own.