Form

A form element wrapper with built-in vertical stack layout and configurable gap spacing. Provides consistent structure for form pages.

Usage Pattern

import { Form } from "@/components/ui/form"
import { FormSection, FormSectionHeader, FormSectionTitle,
  FormSectionDescription, FormSectionContent } from "@/components/ui/form-section"
import { FormActions } from "@/components/ui/form-actions"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

<Form gap="xl" onSubmit={handleSubmit}>
  <FormSection>
    <FormSectionHeader>
      <FormSectionTitle>Profile</FormSectionTitle>
      <FormSectionDescription>
        Basic information about your account.
      </FormSectionDescription>
    </FormSectionHeader>
    <FormSectionContent>
      <Field>
        <FieldLabel>Name</FieldLabel>
        <Input placeholder="Jane Doe" />
      </Field>
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input type="email" placeholder="jane@example.com" />
      </Field>
    </FormSectionContent>
  </FormSection>

  <FormActions>
    <Button variant="outline">Cancel</Button>
    <Button type="submit">Save</Button>
  </FormActions>
</Form>

Gap Variants

Adjust the gap prop to control vertical spacing between form children. The default value of "xl" works well for most forms with distinct sections.

{/* Tight spacing for compact forms */}
<Form gap="sm">...</Form>

{/* Default spacing (recommended) */}
<Form gap="xl">...</Form>

{/* Extra spacing for long-form pages */}
<Form gap="2xl">...</Form>

API Reference

Prop	Type	Default	Description
`gap`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"xl"`	Vertical spacing between child elements. Uses the Stack component internally for layout.
`onSubmit`	`(e: React.FormEvent) => void`	—	Form submission handler.
`className`	`string`	—	Additional CSS classes to apply to the form element.
`children` required	`React.ReactNode`	—	Form content, typically Field components, FormSections, and FormActions.