Native Select

A styled native <select> with a Chevron indicator. Same field chrome as Input. Use when a custom dropdown is unnecessary.

Preview

Country

Installation

bash

npx shadcn@latest add @layout/native-select

Usage

tsx

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

Examples

With option groups

Timezone

Sizes

Disabled

Role

Guidelines for AI agents

Use for simple option lists where the native select UX is acceptable — particularly on mobile, where native pickers have better ergonomics. Pair with Label via htmlFor/id. For searchable or complex option lists, use the Combobox or Select component instead.

Never

Neverhardcode the chevron colour; it derives from --layout-muted-fg
Neverattempt to style the option elements — they are rendered by the OS
Neveruse for more than ~15 options without a search; switch to Combobox
Neverremove appearance-none — it hides the OS chevron so the custom one shows

Tokens consumed

--layout-input--layout-ring--layout-fg--layout-muted-fg--layout-danger--layout-radius--layout-shadow-xs--layout-duration-base