Native Select

A styled native <select> — fully accessible and mobile-friendly.

$ pnpm dlx shadcn@latest add https://dashral.com/r/native-select.json

Country

Language

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/native-select.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/native-select

Usage

example.tsx

1import { NativeSelect } from "@/components/dashral/native-select"
2
3<NativeSelect
4  label="Country"
5  placeholder="Pick a country"
6  options={[
7    { value: "id", label: "Indonesia" },
8    { value: "sa", label: "Saudi Arabia" },
9    { value: "us", label: "United States" },
10  ]}
11/>

Examples

Regional settings

Language, currency and a grouped time zone list, with a live preview of how an order is written.

Language and region

Currency

Time zone

Preview

Order #1042Rp 1.250.000

17 Okt 2026, 16.12

Sort by

A compact select in a list's toolbar, named with aria-label instead of a visible label.

4 products

Pour-over Coffee Set540 sold · added 9d ago$64
Linen Desk Mat330 sold · added 14d ago$39
Retro 35mm Film Camera212 sold · added 3d ago$159
Mechanical Keyboard98 sold · added 1d ago$219

API reference

NativeSelect

Also takes every prop of <select>(opens in a new tab).

Prop	Type	Default
`options`	`(string \| { value; label?; disabled? } \| { label; options })[]` The choices, or groups of them (an <optgroup> each). Required.	—
`placeholder`	`string` Shown while nothing is picked.	—
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`classNames`	`{ root, label, description, error, select, icon }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`↓`or`↑`or`Letters`	The browser's own select keys

Accessibility

A real <select>: the most robust choice on phones and with assistive technology.
With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.