Native select

1import {
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}
17

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}
37

1import { 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}
67

1import {
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