FormSection
ImplementedDashboard form section with title + description + sibling divider. Replaces the um-form-section CSS layout system.
src/components/molecules/FormSection/FormSection.tsxThe 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.
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).
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
title*stringSection heading. Rendered as a small uppercase title.
descriptionReact.ReactNodeOptional supporting line under the title.
children*React.ReactNodeSection body — typically a FormRow of fields, but any children work.
as"div" | "fieldset"divRender the section as a <fieldset> for semantic grouping of its fields.
disabledbooleanfalseDisable every descendant control at once (fieldset variant only — ignored on div).
classNamestringExtra classes on the root.
Props
FormSection
titlestring—Section heading, rendered as a small uppercase title
descriptionReact.ReactNode—Optional supporting line under the title
childrenReact.ReactNode—Section body — typically a FormRow of fields, but any children work.
as'div' | 'fieldset''div'Render the section as a <fieldset> so its children can be disabled together by toggling the fieldset's disabled prop.
disabledbooleanfalseDisable every descendant control at once via native fieldset semantics. Only meaningful with as='fieldset' — ignored on the default div variant.
classNamestring—Extra classes on the root.
<FormSection />Accessibility
Type
1 ruleARIA
1 ruleUsage
Import
import { FormSection } from "@epasslive/design-system"Example 1
<FormSection title="Basic Information" description="Visible on the event page."><FormRow><Input … /></FormRow></FormSection>Example 2
<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'