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