combobox-form.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox-form",
  "type": "registry:example",
  "author": "shadcn (https://ui.shadcn.com)",
  "registryDependencies": [
    "command",
    "form"
  ],
  "files": [
    {
      "path": "examples/combobox-form.tsx",
      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst languages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n  language: z.string({\n    required_error: \"Please select a language.\",\n  }),\n})\n\nexport default function ComboboxForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"language\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Language</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      className={cn(\n                        \"w-[200px] justify-between\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value\n                        ? languages.find(\n                            (language) => language.value === field.value\n                          )?.label\n                        : \"Select language\"}\n                      <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[200px] p-0\">\n                  <Command>\n                    <CommandInput placeholder=\"Search language...\" />\n                    <CommandList>\n                      <CommandEmpty>No language found.</CommandEmpty>\n                      <CommandGroup>\n                        {languages.map((language) => (\n                          <CommandItem\n                            value={language.label}\n                            key={language.value}\n                            onSelect={() => {\n                              form.setValue(\"language\", language.value)\n                            }}\n                          >\n                            {language.label}\n                            <Check\n                              className={cn(\n                                \"ml-auto\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                This is the language that will be used in the dashboard.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}