Form Layout Standard

Accessibility

Import FormLayoutStandard, FormLayoutStandardFooter, FormLayoutStandardIntent, FormLayoutStandardSpacing, FormLayoutStandardWidth from @prepared911/ui/blocks/form-layout-standard.

The root is a native form. Name it with aria-label or aria-labelledby and it is a form landmark. The description is linked through aria-describedby, merged with the error summary's id.
Required fields are announced by their own required state. The marker is decorative, and the hint is plain text said once.
The error summary is a live region (role="alert"). After a failed submit attempt focus moves once to the first invalid control, or to the summary when no control is invalid. Each field exposes its own error.
A pending submit sets aria-busy on the form. The submit Button is loading, not disabled-looking, and keeps its name unless submitPendingLabel is passed. Cancel is disabled.
Enter in a single-line field submits; a text area keeps Enter for a new line.
Reading order is source order: description, hint, fields, then extra actions, Cancel, and submit.
Inside a disabled fieldset, every field and both Buttons are natively disabled.
At 320 CSS px or 200% text the actions row wraps instead of overflowing.

Form Layout Standard / API and Development

Call Transcript / Usage

Form Layout Standard

Accessibility

Import FormLayoutStandard, FormLayoutStandardFooter, FormLayoutStandardIntent, FormLayoutStandardSpacing, FormLayoutStandardWidth from @prepared911/ui/blocks/form-layout-standard.

The root is a native form. Name it with aria-label or aria-labelledby and it is a form landmark. The description is linked through aria-describedby, merged with the error summary's id.
Required fields are announced by their own required state. The marker is decorative, and the hint is plain text said once.
The error summary is a live region (role="alert"). After a failed submit attempt focus moves once to the first invalid control, or to the summary when no control is invalid. Each field exposes its own error.
A pending submit sets aria-busy on the form. The submit Button is loading, not disabled-looking, and keeps its name unless submitPendingLabel is passed. Cancel is disabled.
Enter in a single-line field submits; a text area keeps Enter for a new line.
Reading order is source order: description, hint, fields, then extra actions, Cancel, and submit.
Inside a disabled fieldset, every field and both Buttons are natively disabled.
At 320 CSS px or 200% text the actions row wraps instead of overflowing.

Form Layout Standard / API and Development

Call Transcript / Usage