Native Select

A styled native HTML select element.

"use client";

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

export default function NativeSelectDemo() {
  return (
    <div className="flex items-end gap-6">
      <div className="flex flex-col gap-2">
        <Label htmlFor="native-select-timezone">Timezone</Label>
        <NativeSelect id="native-select-timezone" defaultValue="">
          <NativeSelectOption value="" disabled>
            Select a timezone
          </NativeSelectOption>
          <NativeSelectOption value="utc">UTC</NativeSelectOption>
          <NativeSelectOption value="europe-istanbul">
            Europe/Istanbul
          </NativeSelectOption>
          <NativeSelectOption value="america-new-york">
            America/New_York
          </NativeSelectOption>
          <NativeSelectOption value="asia-tokyo">Asia/Tokyo</NativeSelectOption>
        </NativeSelect>
      </div>
      <NativeSelect size="sm" defaultValue="10" aria-label="Rows per page">
        <NativeSelectOption value="10">10 rows</NativeSelectOption>
        <NativeSelectOption value="25">25 rows</NativeSelectOption>
        <NativeSelectOption value="50">50 rows</NativeSelectOption>
      </NativeSelect>
    </div>
  );
}

Installation

npx shadcn@latest add https://sevenui.dev/r/native-select.json

Usage

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

export function FruitSelect() {
  return (
    <NativeSelect defaultValue="apple" aria-label="Fruit">
      <NativeSelectOption value="apple">Apple</NativeSelectOption>
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
    </NativeSelect>
  );
}

Reach for the native select when you want the platform’s own dropdown — native browser behavior, mobile-optimized pickers, and zero JS overhead. Use the Select component when you need custom option rendering, animations, or richer interactions.

Examples

Grouped options

NativeSelectOptGroup wraps related options; individual options can be disabled.

"use client";

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/registry/base/ui/native-select";

export default function NativeSelectGroups() {
  return (
    <NativeSelect defaultValue="button" aria-label="Component">
      <NativeSelectOptGroup label="Form">
        <NativeSelectOption value="button">Button</NativeSelectOption>
        <NativeSelectOption value="input">Input</NativeSelectOption>
        <NativeSelectOption value="checkbox">Checkbox</NativeSelectOption>
      </NativeSelectOptGroup>
      <NativeSelectOptGroup label="Overlay">
        <NativeSelectOption value="dialog">Dialog</NativeSelectOption>
        <NativeSelectOption value="popover">Popover</NativeSelectOption>
        <NativeSelectOption value="tooltip" disabled>
          Tooltip (soon)
        </NativeSelectOption>
      </NativeSelectOptGroup>
    </NativeSelect>
  );
}

API reference

NativeSelect

Extends the native <select> element — all its props (value, defaultValue, onChange, disabled, multiple, …) apply. The native numeric size attribute is replaced by the visual size variant below. Invalid state styles via aria-invalid.

Prop	Type	Default
`size`	`"sm" \| "default"`	`"default"`

NativeSelectOption and NativeSelectOptGroup

Extend the native <option> and <optgroup> elements — value, label, and disabled behave exactly as in HTML.