ExampleForm() — ui Function Reference

Architecture documentation for the ExampleForm() function in example-form.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ExampleForm() — ui Function Reference

Dependency Diagram

graph TD
  235e2127_7bfb_c6ac_0ae6_dddf86645eb6["ExampleForm()"]
  d208061b_e1b1_f242_6779_9bd0be29baaa["example-form.tsx"]
  235e2127_7bfb_c6ac_0ae6_dddf86645eb6 -->|defined in| d208061b_e1b1_f242_6779_9bd0be29baaa
  style 235e2127_7bfb_c6ac_0ae6_dddf86645eb6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/(pages)/react-hook-form/example-form.tsx lines 65–490

export function ExampleForm() {
  const [values, setValues] = useState<z.infer<typeof exampleFormSchema>>()
  const [open, setOpen] = useState(false)
  const form = useForm<z.infer<typeof exampleFormSchema>>({
    resolver: zodResolver(exampleFormSchema),
    mode: "onChange",
    defaultValues: {
      name: "",
      email: "",
      plan: "basic" as const,
      billingPeriod: "",
      addons: ["analytics"],
      emailNotifications: false,
      teamSize: 1,
      comments: "",
      startDate: new Date(),
      theme: "system",
      password: "",
    },
  })

  function onSubmit(data: z.infer<typeof exampleFormSchema>) {
    setValues(data)
    setOpen(true)
  }

  return (
    <>
      <Card className="w-full max-w-sm">
        <CardHeader className="border-b">
          <CardTitle>React Hook Form</CardTitle>
          <CardDescription>
            This form uses React Hook Form with Zod validation.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form id="subscription-form" onSubmit={form.handleSubmit(onSubmit)}>
            <FieldGroup>
              <Controller
                name="name"
                control={form.control}
                render={({ field, fieldState }) => {
                  const isInvalid = fieldState.invalid
                  return (
                    <Field data-invalid={isInvalid}>
                      <FieldLabel htmlFor={field.name}>Name</FieldLabel>
                      <Input
                        {...field}
                        id={field.name}
                        aria-invalid={isInvalid}
                        autoComplete="off"
                      />
                      <FieldDescription>Enter your name</FieldDescription>
                      {isInvalid && <FieldError errors={[fieldState.error]} />}
                    </Field>
                  )
                }}
              />
              <Controller
                name="email"
                control={form.control}
                render={({ field, fieldState }) => {
                  const isInvalid = fieldState.invalid
                  return (
                    <Field data-invalid={isInvalid}>
                      <FieldLabel htmlFor={field.name}>Email</FieldLabel>
                      <Input
                        {...field}
                        type="email"
                        id={field.name}
                        aria-invalid={isInvalid}
                        autoComplete="off"
                      />
                      <FieldDescription>
                        Enter your email address
                      </FieldDescription>
                      {isInvalid && <FieldError errors={[fieldState.error]} />}
                    </Field>
                  )
                }}
              />