Native Select

Select status Todo In Progress Done Cancelled

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

<NativeSelect class="w-full max-w-xs">
  <NativeSelectOption value="">Select status</NativeSelectOption>
  <NativeSelectOption value="todo">Todo</NativeSelectOption>
  <NativeSelectOption value="in-progress">In Progress</NativeSelectOption>
  <NativeSelectOption value="done">Done</NativeSelectOption>
  <NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>
</NativeSelect>

Installation

To install the native select component, run the following command:

npx shadcn@latest add @fulldev/native-select

Usage

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

<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  <NativeSelectOption value="grapes" disabled> Grapes </NativeSelectOption>
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>

Examples

With Groups

Organize options using NativeSelectOptGroup for better categorization.

Select department Frontend Backend DevOps Sales Rep Account Manager Sales Director Customer Support Product Manager Operations Manager

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

<NativeSelect class="w-full max-w-xs">
  <NativeSelectOption value="">Select department</NativeSelectOption>
  <NativeSelectOptGroup label="Engineering">
    <NativeSelectOption value="frontend">Frontend</NativeSelectOption>
    <NativeSelectOption value="backend">Backend</NativeSelectOption>
    <NativeSelectOption value="devops">DevOps</NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="Sales">
    <NativeSelectOption value="sales-rep">Sales Rep</NativeSelectOption>
    <NativeSelectOption value="account-manager">
      Account Manager
    </NativeSelectOption>
    <NativeSelectOption value="sales-director">
      Sales Director
    </NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="Operations">
    <NativeSelectOption value="support">Customer Support</NativeSelectOption>
    <NativeSelectOption value="product-manager">
      Product Manager
    </NativeSelectOption>
    <NativeSelectOption value="ops-manager">
      Operations Manager
    </NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

Disabled State

Disable individual options or the entire select component.

Select priority Low Medium High Critical

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

<NativeSelect disabled class="w-full max-w-xs">
  <NativeSelectOption value="">Select priority</NativeSelectOption>
  <NativeSelectOption value="low">Low</NativeSelectOption>
  <NativeSelectOption value="medium">Medium</NativeSelectOption>
  <NativeSelectOption value="high">High</NativeSelectOption>
  <NativeSelectOption value="critical">Critical</NativeSelectOption>
</NativeSelect>

Invalid State

Show validation errors with the aria-invalid attribute and error styling.

Select role Admin Editor Viewer Guest

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

<NativeSelect aria-invalid="true" class="w-full max-w-xs">
  <NativeSelectOption value="">Select role</NativeSelectOption>
  <NativeSelectOption value="admin">Admin</NativeSelectOption>
  <NativeSelectOption value="editor">Editor</NativeSelectOption>
  <NativeSelectOption value="viewer">Viewer</NativeSelectOption>
  <NativeSelectOption value="guest">Guest</NativeSelectOption>
</NativeSelect>

Accessibility

• The component maintains all native HTML select accessibility features.
• Screen readers can navigate through options using arrow keys.
• The chevron icon is marked as aria-hidden="true" to avoid duplication.
• Use aria-label or aria-labelledby for additional context when needed.

<NativeSelect aria-label="Choose your preferred language">
  <NativeSelectOption value="en">English</NativeSelectOption>
  <NativeSelectOption value="es">Spanish</NativeSelectOption>
  <NativeSelectOption value="fr">French</NativeSelectOption>
</NativeSelect>