build69
Sign inGet API key
build69  /  Components  /  Forms & Flows  /  FormSection

FormSection

v1.0.1Updated 22 Jul 2026

Visual + semantic grouping of related FormField rows under a heading and optional description. Use for long forms with logical sections.

View source← Back to catalog

Preview

Live · 14 stories
DefaultOpen ↗
▸Why this is recommendedformsectiongroupfieldset+1

The default, out-of-the-box FormSection.

Recommended for+14
  • ✓Multi-section settings pages
  • ✓Long onboarding forms
Tags+6
formsectiongroupfieldsetdefault
Features+4
  • Heading + description
  • Collapsible variant
  • Divider between sections
  • Two-column layout option
Not recommended for−2
  • ✕Single-field inputs (use FormField alone)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "FormSection" })

Usage

import { FormSection } from '@/components/patterns/form-section';

<FormSection title="Billing address" description="Used on invoices.">
  <FormField label="Street"><Input /></FormField>
  <FormField label="City"><Input /></FormField>
</FormSection>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
title

Section heading

stringyes
description

Section description

string—
collapsible

Render collapsible

boolean—

Related

Platform docsAll componentsSource files