Skip to main content

FormSection

Implemented

Dashboard form section with title + description + sibling divider. Replaces the um-form-section CSS layout system.

Categorymolecules
Sourcesrc/components/molecules/FormSection/FormSection.tsx
AI HintDashboard form sections instead of hand-rolled um-form-section CSS. Compose FormSection > FormRow > FormField(width) for admin forms; use ResponsiveFieldGroup instead of FormRow when children must stack on narrow viewports. Ships no copy — all strings are caller-owned.

The dashboard form's «concern» anatomy: a small-caps title, an optional supporting line, then a stack of rows. Stacking several sections produces a 1px divider with vertical breathing room between them — no call-site border-top needed.

FormSection

Molecule — Form family

Default section (div): title + body. Use one per concern — «General», «Tickets», «Visibility» — inside an EventForm / PassForm / PackageManager.

General

This component supports light and dark mode.

WithDescription

Molecule — Form family

The optional description renders as a muted line under the title — reserve it for guidance that applies to the whole concern, not to a single field.

Visibility

Hidden events stay accessible by direct link but never appear in search or listings.

This component supports light and dark mode.

AsFieldset

Molecule — Form family

With as="fieldset" the root becomes a <fieldset>, grouping its inputs semantically for assistive technology — and the component names the group itself (aria-labelledby → the title h3, per-instance id), so screen readers announce «Access, group» with zero call-site wiring.

Tickets

This component supports light and dark mode.

DisabledFieldset

Molecule — Form family

disabled freezes every descendant control at once via native fieldset semantics — e.g. while a save is in flight. It is ignored on the div variant (a div has no disabled semantics).

Access

This component supports light and dark mode.

StackedSections

Molecule — Form family

Three siblings stacked: each section after the first automatically gets its divider and vertical breathing room — the rhythm this component exists to guarantee (mirrors the legacy .um-form-section + .um-form-section rule it replaces). This story is the regression net for that divider rhythm.

General

Tickets

Visibility

Hidden events stay accessible by direct link but never appear in search or listings.

This component supports light and dark mode.

Props

Prop
Type
Default
Description
title*
string
—

Section heading. Rendered as a small uppercase title.

description
React.ReactNode
—

Optional supporting line under the title.

children*
React.ReactNode
—

Section body — typically a FormRow of fields, but any children work.

as
"div" | "fieldset"
div

Render the section as a <fieldset> for semantic grouping of its fields.

disabled
boolean
false

Disable every descendant control at once (fieldset variant only — ignored on div).

className
string
—

Extra classes on the root.

Props

Preview

FormSection

Prop
Type
Required
Default
Description
title
string
Required
—

Section heading, rendered as a small uppercase title

description
React.ReactNode
Optional
—

Optional supporting line under the title

children
React.ReactNode
Required
—

Section body — typically a FormRow of fields, but any children work.

as
'div' | 'fieldset'
Optional
'div'

Render the section as a <fieldset> so its children can be disabled together by toggling the fieldset's disabled prop.

disabled
boolean
Optional
false

Disable every descendant control at once via native fieldset semantics. Only meaningful with as='fieldset' — ignored on the default div variant.

className
string
Optional
—

Extra classes on the root.

Quick use:<FormSection />

Accessibility

ARIA rolegroup (when as='fieldset'; auto-named via aria-labelledby → title)

Type

1 rule

NASA Rule 5

stacked siblings get an automatic border-top divider + generous vertical breathing room (first:pt-0 / first:border-t-0)

ARIA

1 rule

WCAG 1.3.1

as='fieldset' renders a NAMED group — the component wires aria-labelledby to the title h3 itself (per-instance useId), so call sites never pass an id (WCAG 1.3.1)

Usage

Import

tsxSnippet
import { FormSection } from "@epasslive/design-system"

Example 1

tsxSnippet
<FormSection title="Basic Information" description="Visible on the event page."><FormRow><Input … /></FormRow></FormSection>

Example 2

tsxSnippet
<FormSection title="Access" as="fieldset" disabled={saving}>…</FormSection>

Anti-patterns

— Do not nest sections one level deep for spacing — the divider rhythm assumes siblings

— Do not hand-roll the fieldset + legend pair — use as='fieldset'

Design System v4.1.0 | ePassLive