{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-number-field-6","type":"registry:block","title":"Number field in form","description":"Number field in form","dependencies":["@hookform/resolvers","react-hook-form","sonner","zod"],"registryDependencies":["@reui/alert","button","field","@reui/number-field"],"files":[{"path":"c-number-field-6.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/components/reui/number-field\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Alert, AlertDescription } from \"@/components/ui/alert\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst FormSchema = z.object({\n  amount: z\n    .number({\n      message: \"Amount must be a number.\",\n    })\n    .min(10, {\n      message: \"Amount must be at least 10.\",\n    })\n    .max(100, {\n      message: \"Amount must be at most 100.\",\n    }),\n})\n\nexport function Pattern() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      amount: 5,\n    },\n    mode: \"onChange\",\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast.success(\"Form submitted\", {\n      description: (\n        <Alert variant=\"default\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconAlertCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            Your form has successfully submitted with amount: {data.amount}\n          </AlertDescription>\n        </Alert>\n      ),\n    })\n\n    form.reset()\n  }\n\n  return (\n    <div className=\"w-full max-w-68\">\n      <form onSubmit={form.handleSubmit(onSubmit)}>\n        <FieldGroup>\n          <FieldSet>\n            <FieldGroup>\n              <Controller\n                name=\"amount\"\n                control={form.control}\n                render={({ field, fieldState }) => (\n                  <Field data-invalid={fieldState.invalid}>\n                    <FieldLabel htmlFor=\"number-field-amount\">\n                      Amount\n                    </FieldLabel>\n                    <NumberField\n                      id=\"number-field-amount\"\n                      value={field.value}\n                      onValueChange={(value) => field.onChange(value)}\n                      min={0}\n                      max={100}\n                    >\n                      <NumberFieldGroup\n                        aria-invalid={!!form.formState.errors.amount}\n                      >\n                        <NumberFieldDecrement />\n                        <NumberFieldInput />\n                        <NumberFieldIncrement />\n                      </NumberFieldGroup>\n                    </NumberField>\n                    <FieldDescription>\n                      Enter an amount between 10 and 100.\n                    </FieldDescription>\n                    {fieldState.error && (\n                      <FieldError>{fieldState.error?.message}</FieldError>\n                    )}\n                  </Field>\n                )}\n              />\n            </FieldGroup>\n          </FieldSet>\n          <Field orientation=\"horizontal\">\n            <Button\n              variant=\"outline\"\n              type=\"button\"\n              onClick={() => form.reset()}\n              className=\"flex-1\"\n            >\n              Cancel\n            </Button>\n            <Button type=\"submit\" className=\"flex-1\">\n              Submit\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}","target":"components/examples/c-number-field-6.tsx"}],"meta":{"order":6}}