Native Select

A styled native HTML select element with consistent design system integration.

For a styled select component, see the Select component.

import {
  NativeSelect,
  NativeSelectOption,

Installation


pnpm dlx shadcn@latest add 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>

Composition

Simple

Options placed directly under NativeSelect (no NativeSelectOptGroup).

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

With groups

Use NativeSelectOptGroup to organize options into categories.

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

Examples

Groups

Use NativeSelectOptGroup to organize options into categories.

import {
  NativeSelect,
  NativeSelectOptGroup,

Disabled

Add the disabled prop to the NativeSelect component to disable the select.

import {
  NativeSelect,
  NativeSelectOption,

Invalid

Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.

import {
  NativeSelect,
  NativeSelectOption,

Native Select vs Select

Use NativeSelect for native browser behavior, better performance, or mobile-optimized dropdowns.
Use Select for custom styling, animations, or complex interactions.

RTL

To enable RTL support in DWL Components, see the RTL configuration guide.

"use client"

import * as React from "react"

API Reference

NativeSelect

The main select component that wraps the native HTML select element.

<NativeSelect>
  <NativeSelectOption value="option1">Option 1</NativeSelectOption>
  <NativeSelectOption value="option2">Option 2</NativeSelectOption>
</NativeSelect>

NativeSelectOption

Represents an individual option within the select.

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

NativeSelectOptGroup

Groups related options together for better organization.

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

<NativeSelectOptGroup label="Fruits">
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelectOptGroup>

Menubar Navigation Menu

On This Page

Installation Usage Composition Simple With groups Examples Groups Disabled Invalid Native Select vs Select RTL API Reference NativeSelect NativeSelectOption NativeSelectOptGroup

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.