FormSection

A fieldset-based section for grouping related form fields with a header containing a title and description. Ideal for organizing long forms into logical groups.

Basic Form Section

Profile

Update your personal information.

Display name

Bio

<FormSection>
  <FormSectionHeader>
    <FormSectionTitle>Profile</FormSectionTitle>
    <FormSectionDescription>
      Update your personal information.
    </FormSectionDescription>
  </FormSectionHeader>
  <FormSectionContent>
    <Field>
      <FieldLabel>Display name</FieldLabel>
      <Input placeholder="Jane Doe" />
    </Field>
    <Field>
      <FieldLabel>Bio</FieldLabel>
      <Input placeholder="A short description about you" />
    </Field>
  </FormSectionContent>
</FormSection>

Grid Layout

Address

Enter your shipping address.

City

State

<FormSection>
  <FormSectionHeader>
    <FormSectionTitle>Address</FormSectionTitle>
    <FormSectionDescription>
      Enter your shipping address.
    </FormSectionDescription>
  </FormSectionHeader>
  <FormSectionContent layout="grid">
    <Field>
      <FieldLabel>City</FieldLabel>
      <Input placeholder="San Francisco" />
    </Field>
    <Field>
      <FieldLabel>State</FieldLabel>
      <Input placeholder="CA" />
    </Field>
  </FormSectionContent>
</FormSection>

API Reference

FormSection

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply to the fieldset element.
`children` required	`React.ReactNode`	—	Should contain FormSectionHeader and FormSectionContent sub-components.

FormSectionHeader

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the header container.
`children` required	`React.ReactNode`	—	Title and description elements for the section.

FormSectionTitle

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the legend heading.
`children` required	`React.ReactNode`	—	The section title text.

FormSectionDescription

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the description paragraph.
`children` required	`React.ReactNode`	—	Descriptive text explaining the purpose of the section.

FormSectionContent

Prop	Type	Default	Description
`layout`	`"stack" \| "grid"`	`"stack"`	Controls the layout of child fields. Stack arranges vertically, grid uses a two-column layout on medium screens.
`className`	`string`	—	Additional CSS classes for the content container.
`children` required	`React.ReactNode`	—	The form fields within this section.