Form

The <Form /> component is a wrapper around the react-hook-form library. It provides a few things:

• Composable components for building forms.
• A <FormField /> component for building controlled form fields.
• Form validation using zod.
• Handles accessibility and error messages.
• Uses React.useId() for generating unique IDs.
• Applies the correct aria attributes to form fields based on states.
• Built to work with all Radix UI components.
• Bring your own schema library. We use zod but you can use anything you want.
• You have full control over the markup and styling.

Usage

import { FormField } from '@abbyyproduct/ui/components/form';

const form = useForm()
 
<FormField
  control={form.control}
  name="username"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Username</FormLabel>
      <FormControl>
        <Input placeholder="shadcn" {...field} />
      </FormControl>
      <FormDescription>This is your public display name.</FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>