FORMS · FORM LAYOUTS

Horizontal forms

Labels beside their fields — for settings and dense admin screens. Label column, alignment, inline groups and a breakpoint that stacks it.
THEME
DENSITY
01

Playground

Label column, alignment, breakpoint, state — live
PREVIEWLive
Studio settings
avava.studio/avava
Shown on proposals
Settings
LABEL COLUMN
LABEL ALIGN
VERTICAL ALIGN
STACK BELOW
STATE
CODE
<HorizontalForm labelWidth={160} labelAlign="left" alignItems="center" stackBelow={640}> <Field label="Studio name" required>…</Field> …</HorizontalForm>
02

Variants

6 layouts
Classic settingslabel · field · hint
How teammates see you
Only visible to admins
Long labelswrap and align to the top
Added once, not compounding
Inline groupssize W × H · date range
×px
mm
→
Choices in a rowradio groups beside their label
Read-only with editkey → value · edit per row
Account ownerOlivia Lane
PlanStudio · yearly
Seats12 of 25
VAT IDDE123456789
Repeating rowsline items · add / remove
ITEMQTYRATETOTAL
$2,400
$5,100
Total $7,500
02b

Common patterns

Icons and addons, numbered sections, two-column checkout, tabs, centred card
Basic with iconsicon · suffix addon · hint
Letters, numbers and periods
Numbered sectionsseparator between groups
1. Account details
2. Personal info
Two columns · collapsible sectionscheckout · one open at a time
Form with tabsrole="tablist" · ← → between tabs
Centred cardsign in · short horizontal rows
Sign in
03

States

One row
DEFAULTStudio name
Avava Studio
FOCUSStudio name
Avava Studio
ERRORStudio name
Studio name is required
DISABLEDStudio name
Avava Studio
READ-ONLYStudio name
Avava Studio
04

Behavior

Validation, label → field
Validate with summarysame rules as vertical forms
Format PO-1234
Label → fieldclick a label to focus its field
1Client → input
2PO number → input
3Payment terms → select
4Save invoice → button
5Cancel → button
Tab order follows the DOM: label column, then field, row by row. Never use CSS order to move fields.
05

In Avava

Workspace settings, invoice details
Workspace settingsSettings → General
avava.studio/avava
Invoice detailstwo key / value columns
InvoiceINV-0428
StatusSent · awaiting payment
ClientLume Goods
Issued18 Oct 2026
ContactBen Costa
Due1 Nov 2026 · Net 14
POPO-88213
Total$7,500.00
06

Rules & a11y

When to use, screen readers
Horizontal or vertical?pick by context
Horizontal
Settings and admin screensMany short fields, scanned more than filled
Vertical
Sign-up, checkout, mobileFastest to complete, works at any width
Key / value
Read-mostly detailsEdit one row at a time
Table form
Repeating rowsLine items, schedules
Screen readerssame contract as vertical
✓<label for> on every fieldClicking the label focuses the field
✓Radio groups: aria-labelledbyThe left label names the whole group
✓Errors under the fieldLinked with aria-describedby — never under the label
✓Stack, don’t squeezeBelow the breakpoint, labels move above fields
✓DOM order = visual orderLabel, then field, row by row
DO✓Keep one label width for the whole form✓Align short labels to the field centre, long ones to the top✓Stack labels above fields on narrow screens✓Put hints and errors under the field✓Use inline groups for values that belong together
DON’T✕Mix label widths inside one form✕Truncate labels to fit the column✕Use horizontal layout for a 2-field sign-in✕Right-align labels that wrap to many lines✕Squeeze fields below 200 px instead of stacking