Form

forms

Building forms with React Hook Form and Zod validation, with accessible error messages.

Preview

This is your public display name.

Installation

npm install @launchapp/design-system
Import
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@launchapp/design-system";

Examples

Basic Form

const form = useForm({  resolver: zodResolver(z.object({ username: z.string().min(2) })),  defaultValues: { username: "" },});<Form {...form}>  <form onSubmit={form.handleSubmit(console.log)}>    <FormField      control={form.control}      name="username"      render={({ field }) => (        <FormItem>          <FormLabel>Username</FormLabel>          <FormControl>            <Input placeholder="Enter username" {...field} />          </FormControl>          <FormMessage />        </FormItem>      )}    />    <Button type="submit">Submit</Button>  </form></Form>

Props

PropTypeDefaultDescription
...form*
UseFormReturn—The react-hook-form form instance spread as props.
← PreviousFocusScope
Next →Input