Select

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/bases/radix/components/example"
9import { Button } from "@/registry/bases/radix/ui/button"
10import {
11  Dialog,
12  DialogContent,
13  DialogDescription,
14  DialogHeader,
15  DialogTitle,
16  DialogTrigger,
17} from "@/registry/bases/radix/ui/dialog"
18import {
19  Field,
20  FieldDescription,
21  FieldError,
22  FieldLabel,
23} from "@/registry/bases/radix/ui/field"
24import { Input } from "@/registry/bases/radix/ui/input"
25import {
26  Item,
27  ItemContent,
28  ItemDescription,
29  ItemTitle,
30} from "@/registry/bases/radix/ui/item"
31import {
32  NativeSelect,
33  NativeSelectOption,
34} from "@/registry/bases/radix/ui/native-select"
35import {
36  Select,
37  SelectContent,
38  SelectGroup,
39  SelectItem,
40  SelectLabel,
41  SelectSeparator,
42  SelectTrigger,
43  SelectValue,
44} from "@/registry/bases/radix/ui/select"
45import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
46 
47export default function SelectExample() {
48  return (
49    <ExampleWrapper>
50      <SelectBasic />
51      <SelectWithIcons />
52      <SelectWithGroups />
53      <SelectLargeList />
54      <SelectSizes />
55      <SelectPlan />
56      <SelectWithButton />
57      <SelectItemAligned />
58      <SelectWithField />
59      <SelectInvalid />
60      <SelectInline />
61      <SelectDisabled />
62      <SelectInDialog />
63    </ExampleWrapper>
64  )
65}
66 
67function SelectBasic() {
68  return (
69    <Example title="Basic">
70      <Select>
71        <SelectTrigger>
72          <SelectValue placeholder="Select a fruit" />
73        </SelectTrigger>
74        <SelectContent>
75          <SelectGroup>
76            <SelectItem value="apple">Apple</SelectItem>
77            <SelectItem value="banana">Banana</SelectItem>
78            <SelectItem value="blueberry">Blueberry</SelectItem>
79            <SelectItem value="grapes" disabled>
80              Grapes
81            </SelectItem>
82            <SelectItem value="pineapple">Pineapple</SelectItem>
83          </SelectGroup>
84        </SelectContent>
85      </Select>
86    </Example>
87  )
88}
89 
90function SelectWithIcons() {
91  return (
92    <Example title="With Icons">
93      <div className="flex flex-col gap-4">
94        <Select>
95          <SelectTrigger size="sm">
96            <SelectValue
97              placeholder={
98                <>
99                  <IconPlaceholder
100                    lucide="ChartLineIcon"
101                    tabler="IconChartLine"
102                    hugeicons="Chart03Icon"
103                    phosphor="ChartLineIcon"
104// … truncated