Form layout

@summonware/ui · form-layout · P1 · Forms

Usage

A labelled, responsive-column group of fields — the layout unit real forms are built from. A form is a series of named sections a user can scan and skip between, not one long flat stack of inputs; that structure is the actual usability win, not the columns themselves.

import { FormSection } from '@summonware/ui';

Best practices

DoName each section by what it collects ("Billing address"), not generically ("Section 2"). The title is navigation, not decoration.

DoDrop to `columns={1}` on any field that reads oddly split across a row — a full address line, a long text area.

Don'tForce every section to the same column count. A 12-field settings section and a 2-field contact section do not want the same grid.

Examples

Common configurations, variations and states.

Profile section

Profile

How your name and role appear to teammates.

First name

Last name

Role

Title

A titled, two-column group — the common case for a settings or account form.

Reference variants

0 of 15 labels from the reference are demonstrated above.

Simple Action BarAction Button with LinkLayout With side action buttonRight Align Action BarHorizontal FormTop & Bottom Actions BarsSimple Form LayoutControl DividerHorizontal Form LayoutInput Label Alignment2 Columns Form Layout2 Columns Horizontal Form Layout3 Columns Form Layout3 Columns Horizontal Form LayoutForm controls