Combobox

1"use client"
2 
3import * as React from "react"
4import { toast } from "sonner"
5 
6import {
7  Example,
8  ExampleWrapper,
9} from "@/registry/bases/radix/components/example"
10import { Button } from "@/registry/bases/radix/ui/button"
11import { Card, CardContent, CardFooter } from "@/registry/bases/radix/ui/card"
12import {
13  Combobox,
14  ComboboxChip,
15  ComboboxChips,
16  ComboboxChipsInput,
17  ComboboxCollection,
18  ComboboxContent,
19  ComboboxEmpty,
20  ComboboxGroup,
21  ComboboxInput,
22  ComboboxItem,
23  ComboboxLabel,
24  ComboboxList,
25  ComboboxSeparator,
26  ComboboxTrigger,
27  ComboboxValue,
28  useComboboxAnchor,
29} from "@/registry/bases/radix/ui/combobox"
30import {
31  Dialog,
32  DialogContent,
33  DialogDescription,
34  DialogFooter,
35  DialogHeader,
36  DialogTitle,
37  DialogTrigger,
38} from "@/registry/bases/radix/ui/dialog"
39import {
40  Field,
41  FieldDescription,
42  FieldError,
43  FieldGroup,
44  FieldLabel,
45} from "@/registry/bases/radix/ui/field"
46import { Input } from "@/registry/bases/radix/ui/input"
47import {
48  InputGroup,
49  InputGroupAddon,
50  InputGroupInput,
51} from "@/registry/bases/radix/ui/input-group"
52import {
53  Item,
54  ItemContent,
55  ItemDescription,
56  ItemTitle,
57} from "@/registry/bases/radix/ui/item"
58import {
59  Select,
60  SelectContent,
61  SelectGroup,
62  SelectItem,
63  SelectTrigger,
64  SelectValue,
65} from "@/registry/bases/radix/ui/select"
66import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
67 
68export default function ComboboxExample() {
69  return (
70    <ExampleWrapper>
71      <ComboboxBasic />
72      <ComboboxDisabled />
73      <ComboboxInvalid />
74      <ComboboxWithClear />
75      <ComboboxAutoHighlight />
76      <ComboboxWithGroups />
77      <ComboboxWithGroupsAndSeparator />
78      <ComboboxLargeList />
79      <ComboxboxInputAddon />
80      <ComboboxInPopup />
81      <ComboboxWithForm />
82      <ComboboxMultiple />
83      <ComboboxMultipleDisabled />
84      <ComboboxMultipleInvalid />
85      <ComboboxMultipleNoRemove />
86      <ComboboxWithCustomItems />
87      <ComboboxInDialog />
88      <ComboboxWithOtherInputs />
89    </ExampleWrapper>
90  )
91}
92 
93const frameworks = [
94  "Next.js",
95  "SvelteKit",
96  "Nuxt.js",
97  "Remix",
98  "Astro",
99] as const
100 
101const countries = [
102  { code: "", value: "", continent: "", label: "Select country" },
103  { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
104  { code: "al", value: "albania", label: "Albania", continent: "Europe" },
105  { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
106// … truncated