XDS — Design System

FormLayout@xds/core v0.0.14 · XDSFormLayout

Usage

A layout container that arranges form fields with consistent spacing and direction. FormLayout handles where fields go — not state or submission. Wrap it in a <form> for that. Supports vertical (default), horizontal, and horizontal-labels directions, and can be nested to mix them.

ts
import {XDSFormLayout} from '@xds/core/FormLayout'

Best practices

Guidance	Practices
Do	Stack fields vertically for most forms — it's the easiest to scan top to bottom.
Do	Nest a horizontal FormLayout inside a vertical one when fields naturally pair up, like First Name + Last Name or City + State + ZIP.
Do	Use horizontal-labels for settings pages where labels sit beside their inputs.
Don't	Use FormLayout for form state or submission — it's just layout. Wrap it in a <form> for that.
Don't	Put unrelated fields side by side in a horizontal layout — save it for fields that belong together.
Don't	Nest horizontal-labels inside another FormLayout — it uses CSS Grid and needs to be the outermost container.

Examples

Common configurations, variations, and states.

FormLayout — Horizontal

Two fields side by side for naturally paired inputs like first and last name

FormLayout — Settings Form

Settings form with labels placed beside their inputs

FormLayout — Mixed Controls

Form with different control types — text input, selector, and checkboxes

FormLayout — Nested Address Form

Address form mixing vertical and horizontal layouts for grouped fields