Fumadocs on TanStack Start

Pre-built form field components that integrate with react-hook-form for rapid form development

Overview

Form components are pre-built wrappers that combine Field components with Input, Textarea, and Checkbox controls, integrated with react-hook-form's Controller. They provide a quick way to build forms with consistent styling, validation, and error handling out of the box.

These components are ideal for simple to medium complexity forms. For more complex scenarios (like radio groups or custom controls), use the Field components directly with react-hook-form's Controller.

Import

import { FormInput, FormTextarea, FormCheckbox } from "@px-ui/forms";

Usage

FormInput

Basic text input with label and description.

import { FormInput } from "@px-ui/forms";
import { useForm } from "react-hook-form";
import { Button } from "@px-ui/core";

interface FormData {
  email: string;
  username: string;
}

export default function Example() {
  const { control, handleSubmit } = useForm<FormData>({
    defaultValues: {
      email: "",
      username: "",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <FormInput
        control={control}
        name="email"
        label="Email"
        description="Enter your email address"
        placeholder="you@example.com"
      />
      <FormInput
        control={control}
        name="username"
        label="Username"
        description="Choose a unique username"
        placeholder="Enter username"
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

Examples

With Validation

Form inputs automatically show validation errors from react-hook-form. Mark fields as required with the required prop to add a visual indicator.

import { FormInput } from "@px-ui/forms";
import { useForm } from "react-hook-form";
import { Button } from "@px-ui/core";

interface FormData {
  email: string;
  age: string;
}

export default function Example() {
  const { control, handleSubmit } = useForm<FormData>({
    defaultValues: {
      email: "",
      age: "",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <FormInput
        control={control}
        name="email"
        label="Email"
        description="We'll never share your email"
        placeholder="Enter your email address"
        required
      />
      <FormInput
        control={control}
        name="age"
        label="Age"
        description="Must be 18 or older"
        placeholder="Enter your age"
        required
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

FormTextarea

Multi-line text input for longer content.

import { FormTextarea } from "@px-ui/forms";
import { useForm } from "react-hook-form";
import { Button } from "@px-ui/core";

interface FormData {
  message: string;
  feedback: string;
}

export default function Example() {
  const { control, handleSubmit } = useForm<FormData>({
    defaultValues: {
      message: "",
      feedback: "",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <FormTextarea
        control={control}
        name="message"
        label="Message"
        description="Enter your message"
        placeholder="Type your message here..."
      />
      <FormTextarea
        control={control}
        name="feedback"
        label="Feedback"
        description="Your feedback helps us improve"
        placeholder="Share your thoughts and suggestions"
        required
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

FormCheckbox

Checkbox input with horizontal layout by default.

import { FormCheckbox } from "@px-ui/forms";
import { useForm } from "react-hook-form";
import { Button } from "@px-ui/core";

interface FormData {
  acceptTerms: boolean;
  newsletter: boolean;
  notifications: boolean;
}

export default function Example() {
  const { control, handleSubmit } = useForm<FormData>({
    defaultValues: {
      acceptTerms: false,
      newsletter: false,
      notifications: false,
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <FormCheckbox
        control={control}
        name="acceptTerms"
        label="Accept terms and conditions"
        description="You must accept the terms to continue"
        required
      />
      <FormCheckbox
        control={control}
        name="newsletter"
        label="Subscribe to newsletter"
        description="Receive weekly updates and news"
      />
      <FormCheckbox
        control={control}
        name="notifications"
        label="Enable notifications"
        description="Get notified about important updates"
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

Complete Form

Combining multiple form components in a single form.

import { FormInput, FormTextarea, FormCheckbox } from "@px-ui/forms";
import { useForm } from "react-hook-form";
import { Button } from "@px-ui/core";

interface FormData {
  name: string;
  email: string;
  message: string;
  subscribe: boolean;
}

export default function Example() {
  const { control, handleSubmit, reset } = useForm<FormData>({
    defaultValues: {
      name: "",
      email: "",
      message: "",
      subscribe: false,
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data);
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <FormInput
        control={control}
        name="name"
        label="Name"
        description="Your full name"
        placeholder="John Doe"
        required
      />
      <FormInput
        control={control}
        name="email"
        label="Email"
        description="We'll never share your email"
        placeholder="john@example.com"
        required
      />
      <FormTextarea
        control={control}
        name="message"
        label="Message"
        description="Tell us what you think"
        placeholder="Share your thoughts with us..."
        required
      />
      <FormCheckbox
        control={control}
        name="subscribe"
        label="Subscribe to updates"
        description="Receive occasional updates from us"
      />
      <div className="flex gap-2">
        <Button type="submit">Submit</Button>
        <Button type="button" variant="outline" onClick={() => reset()}>
          Reset
        </Button>
      </div>
    </form>
  );
}

API Reference

FormInput

A form input field that integrates Input with Field and react-hook-form's Controller.

Prop	Type	Default	Description
`control` *	`Control`	-	The control object from `useForm()` hook
`name` *	`string`	-	The name of the form field. Must match a key in your form data type
`label` *	`React.ReactNode`	-	Label text for the input field
`description`	`React.ReactNode`	-	Optional description text shown below the input
`placeholder`	`string`	-	Placeholder text displayed when the input is empty
`required`	`boolean`	`false`	Whether the field is required. Adds a visual indicator to the label

FormTextarea

A form textarea field that integrates Textarea with Field and react-hook-form's Controller.

Prop	Type	Default	Description
`control` *	`Control`	-	The control object from `useForm()` hook
`name` *	`string`	-	The name of the form field. Must match a key in your form data type
`label` *	`React.ReactNode`	-	Label text for the textarea field
`description`	`React.ReactNode`	-	Optional description text shown below the textarea
`placeholder`	`string`	-	Placeholder text displayed when the textarea is empty
`required`	`boolean`	`false`	Whether the field is required. Adds a visual indicator to the label

FormCheckbox

A form checkbox field that integrates Checkbox with Field and react-hook-form's Controller. Uses horizontal layout by default with the checkbox appearing before the label.

Prop	Type	Default	Description
`control` *	`Control`	-	The control object from `useForm()` hook
`name` *	`string`	-	The name of the form field. Must match a key in your form data type
`label` *	`React.ReactNode`	-	Label text for the checkbox field
`description`	`React.ReactNode`	-	Optional description text shown below the checkbox
`required`	`boolean`	`false`	Whether the field is required. Adds a visual indicator to the label

* Required prop

Notes

All form components automatically display validation errors from react-hook-form's validation rules
The required prop only adds a visual indicator (asterisk) to the label; add actual validation rules using react-hook-form's validation options
FormCheckbox uses horizontal layout with controlFirst by default, placing the checkbox before the label
For radio groups or more complex form controls, use the Field components directly with react-hook-form's Controller component
These components work seamlessly with react-hook-form's validation, error handling, and form state management

Form Components

Overview

Import

Usage

FormInput

Examples

With Validation

FormTextarea

FormCheckbox

Complete Form

API Reference

FormInput

FormTextarea

FormCheckbox

Notes

On this page