Command Menu

Search documentation, components, and switch theme.

Atoms

Form

React Hook Form integration with validation and error handling.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/form

Install the following dependencies:

npm install react-hook-form radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)}>
    <FormField
      control={form.control}
      name="email"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Email</FormLabel>
          <FormControl>
            <Input placeholder="you@formance.com" {...field} />
          </FormControl>
          <FormDescription>Your account email address.</FormDescription>
          <FormMessage />
        </FormItem>
      )}
    />
  </form>
</Form>