npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '@thrivecart/ui';
import { useForm } from 'react-hook-form';Form with validation and submission
We'll send a confirmation to this address.
function MyForm() {
const form = useForm({
defaultValues: { name: '', email: '' }
});
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel required>Name</FormLabel>
<FormControl>
<Input placeholder="Enter your name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel required>Email</FormLabel>
<FormControl>
<Input type="email" placeholder="you@example.com" {...field} />
</FormControl>
<FormDescription>We'll send a confirmation to this address.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
);
}Validate fields when the user leaves the field and again on form submission for the best user experience.
Display error messages directly below the relevant field using FormMessage.
Preserve user input when validation fails so they can correct specific fields.
Always wrap inputs in FormControl to ensure proper aria attributes are applied.
aria-describedby linking to description and error messages.required prop to add both visual and ARIA required indicators.