Native Select

A styled native HTML select element with options and option groups.

Installation

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

Usage

Use for simple selects when a custom dropdown is unnecessary. Wraps a native <select> with shared form field styling.

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

export function Example() {
  return (
    <NativeSelect>
      <NativeSelectOption value="">Select a fruit</NativeSelectOption>
      <NativeSelectOption value="apple">Apple</NativeSelectOption>
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
      <NativeSelectOptGroup label="Citrus">
        <NativeSelectOption value="orange">Orange</NativeSelectOption>
        <NativeSelectOption value="lemon">Lemon</NativeSelectOption>
      </NativeSelectOptGroup>
    </NativeSelect>
  );
}

Sizes: default and sm. Supports disabled and aria-invalid.