← Back to Home

Forms

Registration Form

This will be your public display name.

We'll never share your email with anyone.

Must be at least 8 characters long.

Form Component Anatomy

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)}>
    <FormField
      control={form.control}
      name="fieldName"
      rules={{ required: "Field is required" }}
      render={({ field }) => (
        <FormItem>
          <FormLabel>Label</FormLabel>
          <FormControl>
            <Input {...field} />
          </FormControl>
          <FormDescription>
            Helper text appears here.
          </FormDescription>
          <FormMessage />  {/* Error message */}
        </FormItem>
      )}
    />
  </form>
</Form>

Form Field States

Normal State

This is a helpful description.

Error State

This field is required.

Disabled State