Form
Form components with validation built on react-hook-form and Radix UI.
Import
import {
Form,
FormField,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
} from "@retents/ui/form"Usage Guidelines
When to use
- For building accessible, validated forms with consistent layout of labels, controls, descriptions, and error messages.
- When using
react-hook-formfor form state management andzodfor schema validation. - For any form that needs field-level validation and error display.
When NOT to use
- For standalone inputs without validation — use Input, Select, etc. directly with a Label.
- For simple one-field interactions like search — a plain input is sufficient.
Preview
Usage
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
})
<Form {...form}>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="Enter username" {...field} />
</FormControl>
<FormDescription>Your public display name.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</Form>Peer dependencies
This component requires: react-hook-form, @hookform/resolvers, zod