Docs › Components › Native Select

Shadcn Native Select

The shadcn/ui Native Select is a styled wrapper around the browser's native <select>, built with Tailwind CSS v4. It keeps native behavior and the OS picker, especially useful on mobile, while matching your design. Native selects appear in simple forms across ShadcnStore blocks.

Key features

• Styled native <select> with the OS picker.
• Options and option groups.
• Zero JavaScript overhead and full native behavior.
• Works great on mobile and with autofill.
• Controlled or uncontrolled value.

Installation

npx shadcn@latest add native-select

Usage

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

export function Example() {
  return (
    <NativeSelect defaultValue="apple">
      <NativeSelectOptGroup label="Fruits">
        <NativeSelectOption value="apple">Apple</NativeSelectOption>
        <NativeSelectOption value="banana">Banana</NativeSelectOption>
      </NativeSelectOptGroup>
    </NativeSelect>
  )
}

Sizes and states

Set size="sm" for a compact control, disabled to make it inactive, and aria-invalid to show a validation error.

<NativeSelect size="sm">…</NativeSelect>
<NativeSelect disabled>…</NativeSelect>
<NativeSelect aria-invalid="true">…</NativeSelect>

Accessibility

• Pair the select with a Label for an accessible name.
• Native selects are keyboard- and screen-reader-friendly by default.
• Provide a sensible default or a placeholder option.

When to use the Native Select

Use a Native Select for simple, single-choice fields where the native OS picker is preferred, especially on mobile or for long option lists. For custom styling, rich items, or search, use the Select or a Combobox.

Used in these blocks

• Checkout forms: country and region.
• Contact: subject selection.
• Apps: simple settings.

Related components

For a custom-styled dropdown use a Select; for search use a Combobox; pair the native select with a Label or Field.

FAQ

What is the shadcn native select?

The Native Select is a styled wrapper around the browser's native select element, giving a consistent look while keeping native behavior and mobile pickers.

When should I use Native Select instead of Select?

Use Native Select for simple options where the OS picker is preferred, especially on mobile. Use the custom Select for richer styling and control.

Does it support option groups?

Yes. Use NativeSelectOptGroup to group NativeSelectOption items.

How do I control the value?

Use value and onChange like a native select, or defaultValue for uncontrolled state.