Skip to main content

Form

Form Controls
Stable

Form wrapper built on React Hook Form. Automatically wires id, aria-describedby, and aria-invalid from field state.

Quick Import
Full Documentation
import { Form } from "@cohere-ai/waypoint-ui/form";

Live Preview

Loading Form...
Open in StorybookOpen in v0View Docs

Examples

Basic Form with Validation

Form with React Hook Form integration

1
import { useForm } from 'react-hook-form';
2
import {
3
  Form, FormField, FormItem, FormLabel,
4
  FormControl, FormMessage,
5
} from '@cohere-ai/waypoint-ui/form';
6
import { Input } from '@cohere-ai/waypoint-ui/input';
7
 
8
const form = useForm<{ username: string }>();
9
 
10
<Form {...form}>
11
  <form onSubmit={form.handleSubmit(onSubmit)}>
12
    <FormField
13
      control={form.control}
14
      name="username"
15
      render={({ field }) => (
16
        <FormItem>
17
          <FormLabel>Username</FormLabel>
18
          <FormControl>
19
            <Input placeholder="johndoe" {...field} />
20
          </FormControl>
21
          <FormMessage />
22
        </FormItem>
23
      )}
24
    />
25
    <Button type="submit">Submit</Button>
26
  </form>
27
</Form>

Found an Issue?

If you've encountered a bug or have feedback about the Form component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Was this page helpful?

Your feedback helps us improve our documentation.

Need Help?

Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.