A lightweight, native HTML select element for choosing options.
lucide-react1import {
2 NativeSelect,
3 NativeSelectOption,
4} from '@/components/ui/native-select'
5
6export function NativeSelectDemo() {
7 return (
8 <NativeSelect>
9 <NativeSelectOption value="">Select role</NativeSelectOption>
10 <NativeSelectOption value="admin">Admin</NativeSelectOption>
11 <NativeSelectOption value="editor">Editor</NativeSelectOption>
12 <NativeSelectOption value="viewer">Viewer</NativeSelectOption>
13 <NativeSelectOption value="guest">Guest</NativeSelectOption>
14 </NativeSelect>
15 )
16}
17Install the following dependencies:
1import {
2 NativeSelect,
3 NativeSelectOptGroup,
4 NativeSelectOption,
5} from '@/components/ui/native-select'
6
7export function NativeSelectGroups() {
8 return (
9 <NativeSelect>
10 <NativeSelectOption value="">Select device</NativeSelectOption>
11
12 <NativeSelectOptGroup label="Mobile Devices">
13 <NativeSelectOption value="iphone">iPhone</NativeSelectOption>
14 <NativeSelectOption value="android">
15 Android Phone
16 </NativeSelectOption>
17 <NativeSelectOption value="ipad">iPad</NativeSelectOption>
18 </NativeSelectOptGroup>
19
20 <NativeSelectOptGroup label="Computers">
21 <NativeSelectOption value="laptop">Laptop</NativeSelectOption>
22 <NativeSelectOption value="desktop">Desktop</NativeSelectOption>
23 <NativeSelectOption value="macbook">MacBook</NativeSelectOption>
24 </NativeSelectOptGroup>
25
26 <NativeSelectOptGroup label="Wearables">
27 <NativeSelectOption value="watch">
28 Smartwatch
29 </NativeSelectOption>
30 <NativeSelectOption value="fitness-band">
31 Fitness Band
32 </NativeSelectOption>
33 </NativeSelectOptGroup>
34 </NativeSelect>
35 )
36}
371import { Label } from '@/components/ui/label'
2import {
3 NativeSelect,
4 NativeSelectOptGroup,
5 NativeSelectOption,
6} from '@/components/ui/native-select'
7
8export function NativeSelectDisabled() {
9 return (
10 <div className="flex flex-col gap-6">
11 <div className="flex flex-col gap-2">
12 <Label>Disabled select</Label>
13 <NativeSelect disabled>
14 <NativeSelectOption value="">
15 Select order status
16 </NativeSelectOption>
17 <NativeSelectOption value="pending">
18 Pending
19 </NativeSelectOption>
20 <NativeSelectOption value="processing">
21 Processing
22 </NativeSelectOption>
23 <NativeSelectOption value="shipped">
24 Shipped
25 </NativeSelectOption>
26 <NativeSelectOption value="delivered">
27 Delivered
28 </NativeSelectOption>
29 </NativeSelect>
30 </div>
31
32 <div className="flex flex-col gap-2">
33 <Label>Disabled grouped</Label>
34 <NativeSelect>
35 <NativeSelectOption value="">
36 Select course
37 </NativeSelectOption>
38
39 <NativeSelectOptGroup label="Available Courses">
40 <NativeSelectOption value="react">
41 React Fundamentals
42 </NativeSelectOption>
43 <NativeSelectOption value="node">
44 Node.js Basics
45 </NativeSelectOption>
46 <NativeSelectOption value="python">
47 Python for Beginners
48 </NativeSelectOption>
49 </NativeSelectOptGroup>
50
51 <NativeSelectOptGroup label="Coming Soon" disabled>
52 <NativeSelectOption value="rust">
53 Rust Programming
54 </NativeSelectOption>
55 <NativeSelectOption value="golang">
56 Go Language Mastery
57 </NativeSelectOption>
58 <NativeSelectOption value="ai">
59 AI & ML Advanced
60 </NativeSelectOption>
61 </NativeSelectOptGroup>
62 </NativeSelect>
63 </div>
64 </div>
65 )
66}
671import {
2 NativeSelect,
3 NativeSelectOption,
4} from '@/components/ui/native-select'
5
6export function NativeSelectInvalid() {
7 return (
8 <NativeSelect aria-invalid="true">
9 <NativeSelectOption value="">
10 Select subscription plan
11 </NativeSelectOption>
12 <NativeSelectOption value="free">Free</NativeSelectOption>
13 <NativeSelectOption value="basic">Basic</NativeSelectOption>
14 <NativeSelectOption value="pro">Pro</NativeSelectOption>
15 <NativeSelectOption value="enterprise">
16 Enterprise
17 </NativeSelectOption>
18 </NativeSelect>
19 )
20}
21| Prop | Type | Default |
|---|---|---|
| value | string | - |
| disabled | boolean | false |
| Prop | Type | Default |
|---|---|---|
| label | string | - |
| disabled | boolean | false |