Native Select

A lightweight select component that uses the browser's native <select> element under the hood. It provides consistent styling with a custom dropdown chevron while preserving native accessibility and mobile behavior.

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

export default function NativeSelectDemo() {
  return (
    <NativeSelect>
      <NativeSelectOption value="" disabled>
        Select a fruit
      </NativeSelectOption>
      <NativeSelectOption value="apple">Apple</NativeSelectOption>
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
      <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
    </NativeSelect>
  )
}

Anatomy

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

<NativeSelect>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
</NativeSelect>

Examples

Basic select

<NativeSelect defaultValue="banana">
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
</NativeSelect>

Small size

Use the size prop to render a more compact select.

<NativeSelect size="sm">
  <NativeSelectOption value="sm">Small</NativeSelectOption>
  <NativeSelectOption value="md">Medium</NativeSelectOption>
  <NativeSelectOption value="lg">Large</NativeSelectOption>
</NativeSelect>

With option groups

Use NativeSelectOptGroup to organize options into labeled sections.

<NativeSelect>
  <NativeSelectOptGroup label="Fruits">
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="Vegetables">
    <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
    <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

Disabled

<NativeSelect disabled>
  <NativeSelectOption value="disabled">Cannot change</NativeSelectOption>
</NativeSelect>

API Reference

NativeSelect

The root wrapper. Renders a <div> containing a native <select> element and a chevron icon.

Prop	Type	Default	Description
`size`	`"sm" \| "default"`	`"default"`	Controls the height of the select. `"sm"` renders at `h-8`, `"default"` at `h-9`.
`className`	`string`	—	Applied to the outer wrapper `<div>`.

Accepts all standard HTML <select> attributes except the native size attribute.

NativeSelectOption

Renders a native <option> element.

Prop	Type	Default
`value`	`string`	—
`children`	`ReactNode`	—

Accepts all standard HTML <option> attributes.

NativeSelectOptGroup

Renders a native <optgroup> element for grouping options.

Prop	Type	Default	Description
`label`	`string`	—	The group heading displayed by the browser.
`className`	`string`	—
`children`	`ReactNode`	—

Accepts all standard HTML <optgroup> attributes.