Form Layout Standard

Usage

FormLayoutStandard is the standard form layout: one column of fields, an optional description and required-field hint above them, and a footer with submit and cancel Buttons. It renders Form, so the submit contract, the pending state, the error summary, and focus on the first invalid control are Form's. The inputs and slots are declared in schema.ts. Coming from ui-forms StandardForm? packages/ui/docs/migrating-from-ui-forms.md maps its props, wires form.handleSubmit(fn) into onSubmit, and explains why Save is not gated on dirty.

Fields. Pass Field, Fieldset, Select, Combobox, NumberField, TextArea, DateInput, Checkbox (or CheckboxGroup), CheckboxCards, RadioGroup, RadioCards, SegmentedControl, DurationField, FileUpload, or Slider as children. Do not pass a Switch: the form has a Save, so no change applies on its own (packages/ui/docs/decisions/0023-forms-and-settings-composition.md, decision 5). A single choice follows packages/ui/docs/decisions/0021-single-choice-control.md: SegmentedControl by default, RadioCards when each option has a description, RadioGroup when the labels vary widely in length. SegmentedControl is a form field: give it a name to submit its value. The layout stacks them at a 16px gap and draws no input. Label, help, and error placement belong to the field.
Required fields. Mark the field required; its Label draws the marker. Pass requiredHint once for the form. Do not repeat the hint on each field.
Description. description sits above the fields and describes the form to assistive technology. Name the form with aria-label or aria-labelledby so it is a landmark.
Actions. The footer is end-aligned: extraActions, then Cancel, then the submit Button. Cancel renders only when you pass cancelLabel; pass onCancel with it. The submit label names the action ("Save user"), never "Submit". Cancel is the neutral default Button; submit is a solid accent Button, or solid destructive with submitIntent={FormLayoutStandardIntent.Destructive} and explicit copy.
Errors. Validate in onSubmit, then pass errorSummary (and invalid for field errors without a summary). The summary is a live region; after a failed attempt focus moves once to the first invalid control. Set each field's invalid and error yourself.
Pending. Return a promise from onSubmit or pass pending. The submit Button shows as loading, Cancel is disabled, and repeat submits are ignored. Pass submitPendingLabel to name the loading state.
Pristine forms. The layout tracks no values, and Save stays enabled when nothing changed: the form validates on submit (packages/ui/docs/decisions/0023-forms-and-settings-composition.md, decision 13).
Unsaved changes. The layout has no guard. The drawer or dialog that hosts the form owns it.
Hosted actions. A drawer or dialog that owns a sticky footer passes footer={FormLayoutStandardFooter.Hidden}, draws submit and cancel in its own footer, links the submit Button with form={formId} (and gives the form the same id), and passes pending itself. FormLayoutDrawer does this.
Width. width caps the inline size with a size token (Large by default); the form fills a narrower container.
Styles. Load @prepared911/ui/blocks/form-layout-standard/styles.css and the stylesheets of the components it composes (Form, Box, Text, Button, and the fields you pass).

Form Layout Sectioned / Accessibility

Form Layout Standard / API and Development

Form Layout Standard

Usage

Fields. Pass Field, Fieldset, Select, Combobox, NumberField, TextArea, DateInput, Checkbox (or CheckboxGroup), CheckboxCards, RadioGroup, RadioCards, SegmentedControl, DurationField, FileUpload, or Slider as children. Do not pass a Switch: the form has a Save, so no change applies on its own (packages/ui/docs/decisions/0023-forms-and-settings-composition.md, decision 5). A single choice follows packages/ui/docs/decisions/0021-single-choice-control.md: SegmentedControl by default, RadioCards when each option has a description, RadioGroup when the labels vary widely in length. SegmentedControl is a form field: give it a name to submit its value. The layout stacks them at a 16px gap and draws no input. Label, help, and error placement belong to the field.
Required fields. Mark the field required; its Label draws the marker. Pass requiredHint once for the form. Do not repeat the hint on each field.
Description. description sits above the fields and describes the form to assistive technology. Name the form with aria-label or aria-labelledby so it is a landmark.
Actions. The footer is end-aligned: extraActions, then Cancel, then the submit Button. Cancel renders only when you pass cancelLabel; pass onCancel with it. The submit label names the action ("Save user"), never "Submit". Cancel is the neutral default Button; submit is a solid accent Button, or solid destructive with submitIntent={FormLayoutStandardIntent.Destructive} and explicit copy.
Errors. Validate in onSubmit, then pass errorSummary (and invalid for field errors without a summary). The summary is a live region; after a failed attempt focus moves once to the first invalid control. Set each field's invalid and error yourself.
Pending. Return a promise from onSubmit or pass pending. The submit Button shows as loading, Cancel is disabled, and repeat submits are ignored. Pass submitPendingLabel to name the loading state.
Pristine forms. The layout tracks no values, and Save stays enabled when nothing changed: the form validates on submit (packages/ui/docs/decisions/0023-forms-and-settings-composition.md, decision 13).
Unsaved changes. The layout has no guard. The drawer or dialog that hosts the form owns it.
Hosted actions. A drawer or dialog that owns a sticky footer passes footer={FormLayoutStandardFooter.Hidden}, draws submit and cancel in its own footer, links the submit Button with form={formId} (and gives the form the same id), and passes pending itself. FormLayoutDrawer does this.
Width. width caps the inline size with a size token (Large by default); the form fills a narrower container.
Styles. Load @prepared911/ui/blocks/form-layout-standard/styles.css and the stylesheets of the components it composes (Form, Box, Text, Button, and the fields you pass).

Form Layout Sectioned / Accessibility

Form Layout Standard / API and Development