Form

const form = useForm({ defaultValues: { username: "" } });

<Form {...form}>
  <form class="w-full max-w-sm space-y-4">
    <FormField
      control={form.control}
      name="username"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Username</FormLabel>
          <FormControl><Input placeholder="railbase" {...field} /></FormControl>
          <FormDescription>This is your public display name.</FormDescription>
          <FormMessage />
        </FormItem>
      )}
    />
    <Button type="submit">Submit</Button>
  </form>
</Form>

Accessible form fields with labels, descriptions, and validation messages.

Installation

railbase ui add form

Usage

import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "@/lib/ui/form";

<Form>
  <FormField name="email">
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl><Input type="email" /></FormControl>
      <FormDescription>We'll never share it.</FormDescription>
      <FormMessage />
    </FormItem>
  </FormField>
</Form>

Anatomy

Exported parts: Form · FormField · useFormField · FormItem · FormLabel · FormControl · FormDescription · FormMessage