Form Layout Sectioned

Usage

FormLayoutSectioned is FormLayoutStandard with its fields grouped in titled sections. Each section is a heading and a Fieldset; the form has one submit, one actions row, one error summary, and one pending state. The inputs and slots are declared in schema.ts. Coming from ui-forms SectionedForm and useSectionErrorState? packages/ui/docs/migrating-from-ui-forms.md shows the caller-derived section status and the other prop changes.

Single choices. A choice from a small set of short, similar labels, such as a primary role, is a SegmentedControl. Use RadioCards when each option carries a description, and RadioGroup with Radio when the labels differ widely in length. The rule is ADR 0021. SegmentedControl is a form field: give it a name and it submits its value, restores its default on a form reset, and takes required and invalid. Its label names the radiogroup; the section title already names the group around it.
Controls. A section takes the same controls as FormLayoutStandard (Field, Fieldset, Select, Combobox, NumberField, TextArea, DateInput, Checkbox or CheckboxGroup, CheckboxCards, RadioGroup, RadioCards, SegmentedControl, DurationField, FileUpload, Slider), and not a Switch (packages/ui/docs/decisions/0023-forms-and-settings-composition.md, decision 5).
Sections are not forms. A section has no submit and no action of its own. Everything FormLayoutStandard documents (labels, requiredHint, description, errorSummary, pending, submitDisabled, width) applies to the whole form.
Heading and group. The title is a heading (h2 by default; pass level for a form under an h2) and also names the section's group of fields, so a screen reader announces the group on entry and heading navigation still finds it.
Descriptions. description sits under the title and describes the group.
Errors name the section. Pass error on a section to say what needs attention there, and put the section names in the form's errorSummary ("One section needs attention: Profile"). Field errors stay with their fields. Set status={FormLayoutSectionedStatus.Error} with a statusLabel ("Needs attention") to mark the heading; the dot is decorative, so the text always carries the meaning.
Complete. FormLayoutSectionedStatus.Complete with its label marks a finished section. The block derives no status: the caller knows which sections are valid.
Disabled. disabled on a section disables its group natively. Put the whole form in a disabled Fieldset to disable every section.
Flat sections. Sections are always open. ui-forms' accordion is not ported (a collapsed section would hide the fields an error summary points to).
Columns. Fields stack in one column; ui-forms has no multi-column rows, so none are offered.
Styles. Load @prepared911/ui/blocks/form-layout-sectioned/styles.css, the stylesheet of FormLayoutStandard, and those of the components it composes (Fieldset, Separator, StatusDot, Text, Box, and the fields you pass).

Form Layout Drawer / Accessibility

Form Layout Sectioned / API and Development

Form Layout Sectioned

Usage

Single choices. A choice from a small set of short, similar labels, such as a primary role, is a SegmentedControl. Use RadioCards when each option carries a description, and RadioGroup with Radio when the labels differ widely in length. The rule is ADR 0021. SegmentedControl is a form field: give it a name and it submits its value, restores its default on a form reset, and takes required and invalid. Its label names the radiogroup; the section title already names the group around it.
Controls. A section takes the same controls as FormLayoutStandard (Field, Fieldset, Select, Combobox, NumberField, TextArea, DateInput, Checkbox or CheckboxGroup, CheckboxCards, RadioGroup, RadioCards, SegmentedControl, DurationField, FileUpload, Slider), and not a Switch (packages/ui/docs/decisions/0023-forms-and-settings-composition.md, decision 5).
Sections are not forms. A section has no submit and no action of its own. Everything FormLayoutStandard documents (labels, requiredHint, description, errorSummary, pending, submitDisabled, width) applies to the whole form.
Heading and group. The title is a heading (h2 by default; pass level for a form under an h2) and also names the section's group of fields, so a screen reader announces the group on entry and heading navigation still finds it.
Descriptions. description sits under the title and describes the group.
Errors name the section. Pass error on a section to say what needs attention there, and put the section names in the form's errorSummary ("One section needs attention: Profile"). Field errors stay with their fields. Set status={FormLayoutSectionedStatus.Error} with a statusLabel ("Needs attention") to mark the heading; the dot is decorative, so the text always carries the meaning.
Complete. FormLayoutSectionedStatus.Complete with its label marks a finished section. The block derives no status: the caller knows which sections are valid.
Disabled. disabled on a section disables its group natively. Put the whole form in a disabled Fieldset to disable every section.
Flat sections. Sections are always open. ui-forms' accordion is not ported (a collapsed section would hide the fields an error summary points to).
Columns. Fields stack in one column; ui-forms has no multi-column rows, so none are offered.
Styles. Load @prepared911/ui/blocks/form-layout-sectioned/styles.css, the stylesheet of FormLayoutStandard, and those of the components it composes (Fieldset, Separator, StatusDot, Text, Box, and the fields you pass).

Form Layout Drawer / Accessibility

Form Layout Sectioned / API and Development