Select

1import * as React from 'react'
2import { SearchIcon } 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 SelectDemo() {
15    return (
16        <Select>
17            <SelectTrigger className="w-64">
18                <SelectValue placeholder="Select an OS" />
19            </SelectTrigger>
20            <SelectContent>
21                <SelectGroup>
22                    <SelectLabel>Operating Systems</SelectLabel>
23                    <SelectItem value="windows">Windows Operating</SelectItem>
24                    <SelectItem value="macos">macOS</SelectItem>
25                    <SelectItem value="linux">Linux</SelectItem>
26                    <SelectItem value="android">Android</SelectItem>
27                    <SelectItem value="ios">iOS</SelectItem>
28                </SelectGroup>
29            </SelectContent>
30        </Select>
31    )
32}
33

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="size-4 text-secondary" />}
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">React Native (JS)</SelectItem>
44        </SelectGroup>
45        <SelectGroup>
46          <SelectLabel>Data & AI</SelectLabel>
47          <SelectItem value="r">R</SelectItem>
48          <SelectItem value="julia">Julia</SelectItem>
49          <SelectItem value="matlab">MATLAB</SelectItem>
50          <SelectItem value="scala">Scala</SelectItem>
51        </SelectGroup>
52        <SelectGroup>
53          <SelectLabel>Scripting & Automation</SelectLabel>
54          <SelectItem value="bash">Bash</SelectItem>
55          <SelectItem value="powershell">PowerShell</SelectItem>
56          <SelectItem value="perl">Perl</SelectItem>
57          <SelectItem value="lua">Lua</SelectItem>
58        </SelectGroup>
59      </SelectContent>
60    </Select>
61  )
62}
63