{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-signature-pad-3","type":"registry:block","title":"Form field with validation","description":"Native form field that submits an SVG signature, with a required check and reset.","dependencies":[],"registryDependencies":["button","field","input","@reui/signature-pad"],"files":[{"path":"c-signature-pad-3.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useId, useState } from \"react\"\nimport {\n  SignaturePad,\n  SignaturePadArea,\n  SignaturePadGuide,\n} from \"@/components/reui/signature-pad\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\n\nexport function Pattern() {\n  const id = useId()\n  const [invalid, setInvalid] = useState(false)\n  const [submitted, setSubmitted] = useState<{\n    name: string\n    size: number\n  } | null>(null)\n\n  return (\n    <form\n      noValidate\n      className=\"mx-auto w-full max-w-md\"\n      onSubmit={(event) => {\n        event.preventDefault()\n        const data = new FormData(event.currentTarget)\n        /* The pad writes an SVG data URL into the form under its `name`. */\n        const signature = String(data.get(\"signature\") ?? \"\")\n        setInvalid(!signature)\n        setSubmitted(\n          signature\n            ? {\n                name: String(data.get(\"name\") ?? \"\").trim() || \"Unnamed signer\",\n                size: new Blob([signature]).size,\n              }\n            : null\n        )\n      }}\n      onReset={() => {\n        setInvalid(false)\n        setSubmitted(null)\n      }}\n    >\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor={`${id}-name`}>Full name</FieldLabel>\n          <Input\n            id={`${id}-name`}\n            name=\"name\"\n            autoComplete=\"name\"\n            placeholder=\"Maya Chen\"\n          />\n        </Field>\n        <Field data-invalid={invalid || undefined}>\n          <FieldLabel id={`${id}-label`}>Signature</FieldLabel>\n          <SignaturePad\n            name=\"signature\"\n            format=\"svg\"\n            required\n            onStrokeStart={() => setInvalid(false)}\n          >\n            <SignaturePadArea\n              aria-labelledby={`${id}-label`}\n              aria-describedby={`${id}-hint`}\n              aria-invalid={invalid || undefined}\n            >\n              <SignaturePadGuide />\n            </SignaturePadArea>\n          </SignaturePad>\n          {invalid ? (\n            <FieldError id={`${id}-hint`}>Sign above to continue.</FieldError>\n          ) : (\n            <FieldDescription id={`${id}-hint`}>\n              Use a mouse, a finger or a stylus.\n            </FieldDescription>\n          )}\n        </Field>\n        <div className=\"flex items-center gap-2\">\n          <Button type=\"submit\">Submit</Button>\n          <Button type=\"reset\" variant=\"outline\">\n            Reset\n          </Button>\n          <p\n            role=\"status\"\n            className=\"text-muted-foreground ms-auto min-w-0 truncate text-sm\"\n          >\n            {submitted &&\n              `Signed by ${submitted.name}, ${(submitted.size / 1024).toFixed(1)} KB SVG`}\n          </p>\n        </div>\n      </FieldGroup>\n    </form>\n  )\n}","target":"components/examples/c-signature-pad-3.tsx"}],"meta":{"order":3,"label":"Form Validation"}}