form-next-demo.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-next-demo",
  "type": "registry:example",
  "registryDependencies": [
    "field",
    "input",
    "textarea",
    "button",
    "card",
    "spinner"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/form-next-demo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Form from \"next/form\"\nimport { toast } from \"sonner\"\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  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\nimport { Spinner } from \"@/registry/new-york-v4/ui/spinner\"\n\nimport { demoFormAction } from \"./form-next-demo-action\"\nimport { type FormState } from \"./form-next-demo-schema\"\n\nexport default function FormNextDemo() {\n  const [formState, formAction, pending] = React.useActionState<\n    FormState,\n    FormData\n  >(demoFormAction, {\n    values: {\n      title: \"\",\n      description: \"\",\n    },\n    errors: null,\n    success: false,\n  })\n  const [descriptionLength, setDescriptionLength] = React.useState(0)\n\n  React.useEffect(() => {\n    if (formState.success) {\n      toast(\"Thank you for your feedback\", {\n        description: \"We'll review your report and get back to you soon.\",\n      })\n    }\n  }, [formState.success])\n\n  React.useEffect(() => {\n    setDescriptionLength(formState.values.description.length)\n  }, [formState.values.description])\n\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle>Bug Report</CardTitle>\n        <CardDescription>\n          Help us improve by reporting bugs you encounter.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form action={formAction} id=\"bug-report-form\">\n          <FieldGroup>\n            <Field data-invalid={!!formState.errors?.title?.length}>\n              <FieldLabel htmlFor=\"title\">Bug Title</FieldLabel>\n              <Input\n                id=\"title\"\n                name=\"title\"\n                defaultValue={formState.values.title}\n                disabled={pending}\n                aria-invalid={!!formState.errors?.title?.length}\n                placeholder=\"Login button not working on mobile\"\n                autoComplete=\"off\"\n              />\n              {formState.errors?.title && (\n                <FieldError>{formState.errors.title[0]}</FieldError>\n              )}\n            </Field>\n            <Field data-invalid={!!formState.errors?.description?.length}>\n              <FieldLabel htmlFor=\"description\">Description</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"description\"\n                  name=\"description\"\n                  defaultValue={formState.values.description}\n                  placeholder=\"I'm having an issue with the login button on mobile.\"\n                  rows={6}\n                  className=\"min-h-24 resize-none\"\n                  disabled={pending}\n                  aria-invalid={!!formState.errors?.description?.length}\n                  onChange={(e) => setDescriptionLength(e.target.value.length)}\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText className=\"tabular-nums\">\n                    {descriptionLength}/100 characters\n                  </InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription>\n                Include steps to reproduce, expected behavior, and what actually\n                happened.\n              </FieldDescription>\n              {formState.errors?.description && (\n                <FieldError>{formState.errors.description[0]}</FieldError>\n              )}\n            </Field>\n          </FieldGroup>\n        </Form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"submit\" disabled={pending} form=\"bug-report-form\">\n            {pending && <Spinner />}\n            Submit\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}