Form Layout · Astryx

Form Layout@astryxdesign/core v0.1.1 · FormLayout

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 {FormLayout} from '@astryxdesign/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

Open in Playground

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

FormLayout — Settings Form

Open in Playground

Settings form with labels placed beside their inputs

FormLayout — Mixed Controls

Open in Playground

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

FormLayout — Nested Address Form

Open in Playground

Address form mixing vertical and horizontal layouts for grouped fields