Select

1import * as React from 'react'
2
3import {
4    Select,
5    SelectContent,
6    SelectGroup,
7    SelectItem,
8    SelectLabel,
9    SelectTrigger,
10    SelectValue,
11} from '@/components/ui/select'
12
13export function SelectDemo() {
14    return (
15        <Select>
16            <SelectTrigger className="w-64">
17                <SelectValue placeholder="Select an OS" />
18            </SelectTrigger>
19            <SelectContent>
20                <SelectGroup>
21                    <SelectLabel>Operating Systems</SelectLabel>
22                    <SelectItem value="windows">Windows Operating</SelectItem>
23                    <SelectItem value="macos">macOS</SelectItem>
24                    <SelectItem value="linux">Linux</SelectItem>
25                    <SelectItem value="android">Android</SelectItem>
26                    <SelectItem value="ios">iOS</SelectItem>
27                </SelectGroup>
28            </SelectContent>
29        </Select>
30    )
31}
32

1import * as React from 'react'
2import { MapPin } from 'lucide-react'
3
4import {
5    Select,
6    SelectContent,
7    SelectGroup,
8    SelectItem,
9    SelectLabel,
10    SelectTrigger,
11    SelectValue,
12} from '@/components/ui/select'
13
14export function SelectIcons() {
15    return (
16        <Select>
17            <SelectTrigger
18                className="w-64"
19                leftIcon={<MapPin className="text-secondary size-4" />}
20            >
21                <SelectValue placeholder="Select a country" />
22            </SelectTrigger>
23            <SelectContent>
24                <SelectGroup>
25                    <SelectLabel>Countries</SelectLabel>
26                    <SelectItem value="united-states">United States</SelectItem>
27                    <SelectItem value="canada">Canada</SelectItem>
28                    <SelectItem value="united-kingdom">
29                        United Kingdom
30                    </SelectItem>
31                    <SelectItem value="australia">Australia</SelectItem>
32                    <SelectItem value="germany">Germany</SelectItem>
33                    <SelectItem value="france">France</SelectItem>
34                    <SelectItem value="japan">Japan</SelectItem>
35                    <SelectItem value="south-korea">South Korea</SelectItem>
36                    <SelectItem value="india">India</SelectItem>
37                    <SelectItem value="brazil">Brazil</SelectItem>
38                </SelectGroup>
39            </SelectContent>
40        </Select>
41    )
42}
43

1import * as React from 'react'
2
3import {
4    Select,
5    SelectContent,
6    SelectGroup,
7    SelectItem,
8    SelectLabel,
9    SelectTrigger,
10    SelectValue,
11} from '@/components/ui/select'
12
13export function SelectScrollable() {
14    return (
15        <Select>
16            <SelectTrigger className="w-[280px]">
17                <SelectValue placeholder="Select a programming language" />
18            </SelectTrigger>
19            <SelectContent>
20                <SelectGroup>
21                    <SelectLabel>Web Development</SelectLabel>
22                    <SelectItem value="javascript">JavaScript</SelectItem>
23                    <SelectItem value="typescript">TypeScript</SelectItem>
24                    <SelectItem value="html">HTML</SelectItem>
25                    <SelectItem value="css">CSS</SelectItem>
26                    <SelectItem value="php">PHP</SelectItem>
27                    <SelectItem value="ruby">Ruby</SelectItem>
28                </SelectGroup>
29                <SelectGroup>
30                    <SelectLabel>System & Backend</SelectLabel>
31                    <SelectItem value="python">Python</SelectItem>
32                    <SelectItem value="java">Java</SelectItem>
33                    <SelectItem value="c">C</SelectItem>
34                    <SelectItem value="cpp">C++</SelectItem>
35                    <SelectItem value="go">Go</SelectItem>
36                    <SelectItem value="rust">Rust</SelectItem>
37                </SelectGroup>
38                <SelectGroup>
39                    <SelectLabel>Mobile Development</SelectLabel>
40                    <SelectItem value="swift">Swift</SelectItem>
41                    <SelectItem value="kotlin">Kotlin</SelectItem>
42                    <SelectItem value="dart">Dart (Flutter)</SelectItem>
43                    <SelectItem value="react_native">
44                        React Native (JS)
45                    </SelectItem>
46                </SelectGroup>
47                <SelectGroup>
48                    <SelectLabel>Data & AI</SelectLabel>
49                    <SelectItem value="r">R</SelectItem>
50                    <SelectItem value="julia">Julia</SelectItem>
51                    <SelectItem value="matlab">MATLAB</SelectItem>
52                    <SelectItem value="scala">Scala</SelectItem>
53                </SelectGroup>
54                <SelectGroup>
55                    <SelectLabel>Scripting & Automation</SelectLabel>
56                    <SelectItem value="bash">Bash</SelectItem>
57                    <SelectItem value="powershell">PowerShell</SelectItem>
58                    <SelectItem value="perl">Perl</SelectItem>
59                    <SelectItem value="lua">Lua</SelectItem>
60                </SelectGroup>
61            </SelectContent>
62        </Select>
63    )
64}
65