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

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/(pages)/next-form/example-form.tsx lines 66–394

export function ExampleForm() {
  const formId = React.useId()
  const [formKey, setFormKey] = React.useState(formId)
  const [showResults, setShowResults] = React.useState(false)
  const [formState, formAction, pending] = React.useActionState<
    FormState,
    FormData
  >(subscriptionAction, {
    values: {
      name: "",
      email: "",
      plan: "basic",
      billingPeriod: "",
      addons: ["analytics"],
      teamSize: 1,
      emailNotifications: false,
      comments: "",
      startDate: new Date(),
      theme: "system",
      password: "",
    },
    errors: null,
    success: false,
  })

  React.useEffect(() => {
    if (formState.success) {
      setShowResults(true)
    }
  }, [formState.success])

  return (
    <>
      <Card className="w-full max-w-sm">
        <CardHeader className="border-b">
          <CardTitle>Subscription Form</CardTitle>
          <CardDescription>
            Create your subscription using server actions and useActionState.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Form action={formAction} id="subscription-form" key={formKey}>
            <FieldGroup>
              <Field data-invalid={!!formState.errors?.name?.length}>
                <FieldLabel htmlFor="name">Name</FieldLabel>
                <Input
                  id="name"
                  name="name"
                  defaultValue={formState.values.name}
                  disabled={pending}
                  aria-invalid={!!formState.errors?.name?.length}
                  autoComplete="off"
                />
                <FieldDescription>Enter your name</FieldDescription>
                {formState.errors?.name && (
                  <FieldError>{formState.errors.name[0]}</FieldError>
                )}
              </Field>
              <Field data-invalid={!!formState.errors?.email?.length}>
                <FieldLabel htmlFor="email">Email</FieldLabel>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  defaultValue={formState.values.email}
                  disabled={pending}
                  aria-invalid={!!formState.errors?.email?.length}
                  autoComplete="off"
                />
                <FieldDescription>Enter your email address</FieldDescription>
                {formState.errors?.email && (
                  <FieldError>{formState.errors.email[0]}</FieldError>
                )}
              </Field>
              <FieldSeparator />
              <FieldSet data-invalid={!!formState.errors?.plan?.length}>
                <FieldLegend>Subscription Plan</FieldLegend>
                <FieldDescription>
                  Choose your subscription plan.
                </FieldDescription>
                <RadioGroup