form-rhf-select.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-rhf-select",
  "type": "registry:example",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers",
    "zod"
  ],
  "registryDependencies": [
    "field",
    "select",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/form-rhf-select.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n] as const\n\nconst formSchema = z.object({\n  language: z\n    .string()\n    .min(1, \"Please select your spoken language.\")\n    .refine((val) => val !== \"auto\", {\n      message:\n        \"Auto-detection is not allowed. Please select a specific language.\",\n    }),\n})\n\nexport default function FormRhfSelect() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      language: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-lg\">\n      <CardHeader>\n        <CardTitle>Language Preferences</CardTitle>\n        <CardDescription>\n          Select your preferred spoken language.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-select\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"language\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field\n                  orientation=\"responsive\"\n                  data-invalid={fieldState.invalid}\n                >\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"form-rhf-select-language\">\n                      Spoken Language\n                    </FieldLabel>\n                    <FieldDescription>\n                      For best results, select the language you speak.\n                    </FieldDescription>\n                    {fieldState.invalid && (\n                      <FieldError errors={[fieldState.error]} />\n                    )}\n                  </FieldContent>\n                  <Select\n                    name={field.name}\n                    value={field.value}\n                    onValueChange={field.onChange}\n                  >\n                    <SelectTrigger\n                      id=\"form-rhf-select-language\"\n                      aria-invalid={fieldState.invalid}\n                      className=\"min-w-[120px]\"\n                    >\n                      <SelectValue placeholder=\"Select\" />\n                    </SelectTrigger>\n                    <SelectContent position=\"item-aligned\">\n                      <SelectItem value=\"auto\">Auto</SelectItem>\n                      <SelectSeparator />\n                      {spokenLanguages.map((language) => (\n                        <SelectItem key={language.value} value={language.value}>\n                          {language.label}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-select\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}