Form Textarea

Forms 4

About

A textarea form field wired to TanStack Form with a label, error handling, and validation display.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Form Textarea to your project and fits it to your theme.

Code

How Form Textarea is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useForm } from "@tanstack/react-form";

import { Button } from "@/components/ui/button";
import { FormTextarea } from "@/components/ui/form-textarea";

export default function FormTextareaDemo() {
  const form = useForm({
    defaultValues: {
      bio: "",
    },
    onSubmit: async ({ value }) => {
      console.log(value);
    },
  });

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
      className="flex w-full max-w-sm flex-col gap-4"
    >
      <form.Field
        name="bio"
        validators={{
          onBlur: ({ value }) =>
            !value ? "Please tell us a little about yourself" : undefined,
        }}
      >
        {() => (
          <FormTextarea
            form={form}
            name="bio"
            label="Bio"
            placeholder="Tell us about yourself"
            rows={4}
          />
        )}
      </form.Field>
      <Button type="submit">Submit</Button>
    </form>
  );
}