# FormSection

> Gathers related form fields under a title and a short explanation.

- **Level**: molecule · **Status**: stable · **Role**: surface
- **Import**: `import { FormSection } from "@rrios-forge/ui/molecules/form-section";`
- **Source**: `packages/ui/src/molecules/form-section`

Composes SectionHeader (when title is provided) and stacks Fields below. Renders a <section> landmark. density toggles inter-field gap; the host owns padding. Patterns consulted: Patterns/Forms · FieldAnatomy + FormDensity, Patterns/Information Architecture · SectionAnatomy.

## Use it for

- Group of fields → `FormSection` or `InputGroup`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `density` | — | `compact` `comfortable` | — | — |
| `width` | — | `readable` `full` | — | — |

## Stories

- [Playground](/?path=/story/components-molecules-formsection--playground) · frame: `/iframe.html?id=components-molecules-formsection--playground&viewMode=story`
- [Account section](/?path=/story/components-molecules-formsection--account-section) · frame: `/iframe.html?id=components-molecules-formsection--account-section&viewMode=story`
- [Security section](/?path=/story/components-molecules-formsection--security-section) · frame: `/iframe.html?id=components-molecules-formsection--security-section&viewMode=story`
- [Compact](/?path=/story/components-molecules-formsection--compact) · frame: `/iframe.html?id=components-molecules-formsection--compact&viewMode=story`
- [With action](/?path=/story/components-molecules-formsection--with-action) · frame: `/iframe.html?id=components-molecules-formsection--with-action&viewMode=story`

## Decisions that name it

- ADR-005 — Visual operational rules: surfaces, interaction, motion
- ADR-006 — Geometry and typography signature

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).