Form

Monolith Form component built with react-hook-form and zod.

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/form.json"

Usage

After you add the component with the CLI, import it from your UI folder:

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"
 
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"

Examples

Checkbox

Use different settings for my mobile devices

You can manage your mobile notifications in the mobile settings page.

Radio Group

API Reference

The Form component relies on react-hook-form and provides a set of wrapper components.

Component	Description
`Form`	The root context provider for the form, mapping `react-hook-form` methods.
`FormField`	Connects an input field to the form state using the `name` prop.
`FormItem`	A wrapper for the label, input, description, and error message. Automatically generates IDs for accessibility.
`FormLabel`	The label for the field, automatically colored in the error state.
`FormControl`	The actual input element wrapper. Applies `aria-describedby` and `aria-invalid` attributes.
`FormDescription`	Helper text for the input field.
`FormMessage`	Displays validation error messages tied to the field.

Dropdown menu Input

On This Page

Installation Usage Examples Checkbox Radio Group Select (Dropdown)API Reference