Components
Form
Validated fields with labels, descriptions, and inline errors.
Profile
const form = useForm<z.infer<typeof profileSchema>>({
resolver: zodResolver(profileSchema),
defaultValues: { username: "", email: "" },
});
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl render={<Input placeholder="ada" {...field} />} />
<FormDescription>Public display name.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Save</Button>
</form>
</Form> Markdown for agents: /design/form.md · spec: /design.md