Skip to content
Form Patterns

FormSection

A fieldset with a title and description, for splitting a long form into groups.

Sourcesrc/components/ui/form-section.tsx
Profile

Update your personal information.

Import

import {
  FormSection,
  FormSectionHeader,
  FormSectionTitle,
  FormSectionDescription,
  FormSectionContent,
} from "@mikenotthepope/substrateui"

Composition

FormSection
├── FormSectionHeader
│   ├── FormSectionTitle
│   └── FormSectionDescription
└── FormSectionContent

Grid Layout

Address

Enter your shipping address.

API Reference

FormSection

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply to the fieldset element.
children
required
React.ReactNode—Should contain FormSectionHeader and FormSectionContent sub-components.

FormSectionHeader

PropTypeDefaultDescription
classNamestring—Additional CSS classes for the header container.
children
required
React.ReactNode—Title and description elements for the section.

FormSectionTitle

PropTypeDefaultDescription
classNamestring—Additional CSS classes for the legend heading.
children
required
React.ReactNode—The section title text.

FormSectionDescription

PropTypeDefaultDescription
classNamestring—Additional CSS classes for the description paragraph.
children
required
React.ReactNode—Descriptive text explaining the purpose of the section.

FormSectionContent

PropTypeDefaultDescription
layout"stack" | "grid""stack"Controls the layout of child fields. Stack arranges vertically, grid uses a two-column layout on medium screens.
classNamestring—Additional CSS classes for the content container.
children
required
React.ReactNode—The form fields within this section.