Native Select

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

<NativeSelect>
  <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

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="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>

NativeSelect renders a real select inside a wrapper div. class goes to the wrapper; all other attributes, such as name, required, disabled and dir, go to the select, so it submits with a native form.

Composition

NativeSelect
├── NativeSelectOption
└── NativeSelectOptGroup
    ├── NativeSelectOption
    └── NativeSelectOption

Groups

Use NativeSelectOptGroup to organize options into categories.

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

<NativeSelect>
  <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

Add the disabled prop to NativeSelect to disable the select.

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

<NativeSelect disabled>
  <NativeSelectOption value="">Disabled</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
</NativeSelect>

Invalid

Use aria-invalid to show validation errors, and data-invalid on a surrounding Field for its styling.

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

<NativeSelect aria-invalid="true">
  <NativeSelectOption value="">Error state</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
</NativeSelect>

Native Select vs Select

Use NativeSelect for native browser behavior, better performance, or mobile-optimized dropdowns. Use Select for custom styling of the open list.

RTL

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

const translations = {
  en: {
    dir: "ltr",
    values: {
      placeholder: "Select status",
      todo: "Todo",
      inProgress: "In Progress",
      done: "Done",
      cancelled: "Cancelled",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      placeholder: "اختر الحالة",
      todo: "مهام",
      inProgress: "قيد التنفيذ",
      done: "منجز",
      cancelled: "ملغي",
    },
  },
  he: {
    dir: "rtl",
    values: {
      placeholder: "בחר סטטוס",
      todo: "לעשות",
      inProgress: "בתהליך",
      done: "הושלם",
      cancelled: "בוטל",
    },
  },
}

const { dir, values: t } = translations.ar
---

<NativeSelect dir={dir}>
  <NativeSelectOption value="">{t.placeholder}</NativeSelectOption>
  <NativeSelectOption value="todo">{t.todo}</NativeSelectOption>
  <NativeSelectOption value="in-progress">{t.inProgress}</NativeSelectOption>
  <NativeSelectOption value="done">{t.done}</NativeSelectOption>
  <NativeSelectOption value="cancelled">{t.cancelled}</NativeSelectOption>
</NativeSelect>

Accessibility

It keeps all native select keyboard and screen reader behavior.
The chevron icon has aria-hidden="true".
Give the select a label, with Label for, aria-label or aria-labelledby.

API Reference

Source: src/components/ui/native-select

NativeSelect

Prop	Type	Default
`size`	`"sm" \| "default"`	`"default"`
`multiple`	`boolean`	`false`
`disabled`	`boolean`	`false`

NativeSelectOption

Prop	Type	Default
`value`	`string`
`disabled`	`boolean`	`false`

NativeSelectOptGroup

Prop	Type	Default
`label`	`string`
`disabled`	`boolean`	`false`

Sidebar

Search