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
  f2233e50_d605_8d11_9791_2296c10563c4["ExampleForm()"]
  07235f46_73fd_a292_175e_13f8a199fef0["example-form.tsx"]
  f2233e50_d605_8d11_9791_2296c10563c4 -->|defined in| 07235f46_73fd_a292_175e_13f8a199fef0
  style f2233e50_d605_8d11_9791_2296c10563c4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/(pages)/tanstack-form/example-form.tsx lines 64–532

export function ExampleForm() {
  const form = useForm({
    defaultValues: {
      name: "",
      email: "",
      plan: "",
      billingPeriod: "",
      addons: ["analytics"],
      emailNotifications: false,
      teamSize: 1,
      comments: "",
      startDate: new Date(),
      theme: "system",
      password: "",
    },
    validators: {
      onBlur: exampleFormSchema,
    },
    onSubmit: async ({ value }) => {
      setValues(value)
      setOpen(true)
    },
  })
  const [values, setValues] = React.useState<typeof form.state.values>()
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Card className="w-full max-w-sm">
        <CardHeader className="border-b">
          <CardTitle>Example Form</CardTitle>
          <CardDescription>
            This is an example form using TanStack Form.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form
            id="example-form"
            onSubmit={(e) => {
              e.preventDefault()
              e.stopPropagation()
              void form.handleSubmit()
            }}
          >
            <FieldGroup>
              <form.Field
                name="name"
                children={(field) => {
                  const isInvalid =
                    field.state.meta.isTouched && !field.state.meta.isValid
                  return (
                    <Field data-invalid={isInvalid}>
                      <FieldLabel htmlFor={field.name}>Name</FieldLabel>
                      <Input
                        id={field.name}
                        name={field.name}
                        value={field.state.value}
                        onBlur={field.handleBlur}
                        onChange={(e) => field.handleChange(e.target.value)}
                        aria-invalid={isInvalid}
                        autoComplete="off"
                      />
                      <FieldDescription>Enter your name</FieldDescription>
                      {isInvalid && (
                        <FieldError errors={field.state.meta.errors} />
                      )}
                    </Field>
                  )
                }}
              />
              <form.Field
                name="email"
                children={(field) => {
                  const isInvalid =
                    field.state.meta.isTouched && !field.state.meta.isValid
                  return (
                    <Field data-invalid={isInvalid}>
                      <FieldLabel htmlFor={field.name}>Email</FieldLabel>
                      <Input
                        id={field.name}
                        name={field.name}