snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-array.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-array.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { XIcon } from "lucide-react"
+import { Controller, useFieldArray, useForm } from "react-hook-form"
+import { toast } from "sonner"
+import * as z from "zod"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSet,
+} from "@/registry/new-york-v4/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/registry/new-york-v4/ui/input-group"
+
+const formSchema = z.object({
+  emails: z
+    .array(
+      z.object({
+        address: z.string().email("Enter a valid email address."),
+      })
+    )
+    .min(1, "Add at least one email address.")
+    .max(5, "You can add up to 5 email addresses."),
+})
+
+export default function FormRhfArray() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      emails: [{ address: "" }, { address: "" }],
+    },
+  })
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "emails",
+  })
+
+  function onSubmit(data: z.infer<typeof formSchema>) {
+    toast("You submitted the following values:", {
+      description: (
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
+          <code>{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+      position: "bottom-right",
+      classNames: {
+        content: "flex flex-col gap-2",
+      },
+      style: {
+        "--border-radius": "calc(var(--radius)  + 4px)",
+      } as React.CSSProperties,
+    })
+  }
+
+  return (
+    <Card className="w-full sm:max-w-md">
+      <CardHeader className="border-b">
+        <CardTitle>Contact Emails</CardTitle>
+        <CardDescription>Manage your contact email addresses.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="form-rhf-array" onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldSet className="gap-4">
+            <FieldLegend variant="label">Email Addresses</FieldLegend>
+            <FieldDescription>
+              Add up to 5 email addresses where we can contact you.
+            </FieldDescription>
+            <FieldGroup className="gap-4">
+              {fields.map((field, index) => (
+                <Controller
+                  key={field.id}
+                  name={`emails.${index}.address`}
+                  control={form.control}
+                  render={({ field: controllerField, fieldState }) => (
+                    <Field
+                      orientation="horizontal"
+                      data-invalid={fieldState.invalid}
+                    >
+                      <FieldContent>
+                        <InputGroup>
+                          <InputGroupInput
+                            {...controllerField}
+                            id={`form-rhf-array-email-${index}`}
+                            aria-invalid={fieldState.invalid}
+                            placeholder="name@example.com"
+                            type="email"
+                            autoComplete="email"
+                          />
+                          {fields.length > 1 && (
+                            <InputGroupAddon align="inline-end">
+                              <InputGroupButton
+                                type="button"
+                                variant="ghost"
+                                size="icon-xs"
+                                onClick={() => remove(index)}
+                                aria-label={`Remove email ${index + 1}`}
+                              >
+                                <XIcon />
+                              </InputGroupButton>
+                            </InputGroupAddon>
+                          )}
+                        </InputGroup>
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </FieldContent>
+                    </Field>
+                  )}
+                />
+              ))}
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => append({ address: "" })}
+                disabled={fields.length >= 5}
+              >
+                Add Email Address
+              </Button>
+            </FieldGroup>
+            {form.formState.errors.emails?.root && (
+              <FieldError errors={[form.formState.errors.emails.root]} />
+            )}
+          </FieldSet>
+        </form>
+      </CardContent>
+      <CardFooter className="border-t">
+        <Field orientation="horizontal">
+          <Button type="button" variant="outline" onClick={() => form.reset()}>
+            Reset
+          </Button>
+          <Button type="submit" form="form-rhf-array">
+            Save
+          </Button>
+        </Field>
+      </CardFooter>
+    </Card>
+  )
+}