Form Patterns

Compose Field components into logical sections with Card wrappers, then add a FormActions row at the bottom. This pattern scales from simple settings forms to complex multi-section workflows.

Settings Form

Profile

Your public profile information.

Markdown is supported.

Notifications

Manage how you receive updates.

Receive updates about your account via email.

Receive tips, product updates, and offers.

{/* Section 1: Profile */}
<Card>
  <CardContent className="pt-6">
    <Stack gap="md">
      <H4>Profile</H4>
      <Muted>Your public profile information.</Muted>
      <Field>
        <FieldLabel>Display Name</FieldLabel>
        <Input placeholder="Jane Smith" />
      </Field>
      <Field>
        <FieldLabel>Bio</FieldLabel>
        <Textarea placeholder="Tell us about yourself..." />
        <FieldHint>Markdown is supported.</FieldHint>
      </Field>
    </Stack>
  </CardContent>
</Card>

{/* Section 2: Notifications */}
<Card>
  <CardContent className="pt-6">
    <Stack gap="md">
      <H4>Notifications</H4>
      <Muted>Manage how you receive updates.</Muted>
      <Field>
        <div className="flex items-center justify-between">
          <FieldLabel>Email notifications</FieldLabel>
          <Switch />
        </div>
        <FieldHint>Receive updates about your account via email.</FieldHint>
      </Field>
      <Field>
        <div className="flex items-center justify-between">
          <FieldLabel>Marketing emails</FieldLabel>
          <Switch />
        </div>
        <FieldHint>Receive tips, product updates, and offers.</FieldHint>
      </Field>
    </Stack>
  </CardContent>
</Card>

{/* Form Actions */}
<Cluster gap="sm" justify="end">
  <Button variant="outline">Cancel</Button>
  <Button>Save Changes</Button>
</Cluster>

Composition Reference

PropTypeDefaultDescription
Fieldcomponent—Wraps a single input with label, hint, and error. Provides context via FieldContext.
FormSection (pattern)Card + heading—Group related fields under a titled Card. Not a dedicated component -- compose with Card + H4.
FormActions (pattern)Cluster of Buttons—A row of action buttons (submit, cancel) at the bottom of the form.