Form

Building forms with React Hook Form and Zod. Provides composable components for building accessible forms with validation. Replaces the legacy Form component.

Installation

# Install @opencosmos/ui to use Form
pnpm add @opencosmos/ui

Preview

Loading preview...

Usage

Import

import { Form } from '@opencosmos/ui';

Example

<Form>
  Content
</Form>

Eject

Copy this component into your project for full customization

Accessibility

Built on react-hook-form for accessibility
Proper form field associations with labels
Error messages announced to screen readers
Keyboard navigation support
Focus management on validation errors

Code Examples

Basic Form

Complete form with validation using react-hook-form and zod

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Button } from "@opencosmos/ui"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@opencosmos/ui"
import { Input } from "@opencosmos/ui"

const formSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
})

function ProfileForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <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>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}