FormSection

Group related fields

FormSection uses a native fieldset and legend to name a group of related controls. Pass supporting text or rich content through description. Field values and validation remain in your form.

<FormSection legend="Equipment details" description="Use the name on the equipment register.">
  <Field controlId="resource-name" label="Name">
    <Input value={name} onChange={(event) => setName(event.target.value)} />
  </Field>
</FormSection>

Disabled groups

disabled applies native fieldset semantics to descendant native form controls. Their values remain owned by the caller. Composite controls such as segmented date inputs and calendar grids must also receive their own disabled prop; a fieldset does not disable their non-native interactive parts. Links and controls rendered outside the fieldset, including portaled content, need their own disabled policy. Explain why a group is unavailable in its description.

Props

Native fieldset attributes, including name, form and disabled, pass through. The forwarded ref targets the fieldset. A caller's aria-describedby references are appended to the generated description association.

Accessibility

• A native legend names each group.
• Descriptions use unique IDs, including repeated sections.
• Native disabled descendants cannot be edited or activated.
• Long legends, descriptions and supplied content can wrap in narrow layouts; a long identifier or unbroken token in the legend or description breaks anywhere.
• The component adds no automatic announcement or focus movement.

Manifest entry

<FormSection legend="Equipment details" description="Use the registered name.">
  <Field controlId="resource-name" label="Name"><Input /></Field>
</FormSection>

{
  "description": "Native fieldset with a legend, optional description and supplied form controls.",
  "props": {
    "legend": {
      "type": "string",
      "required": true,
      "description": "Visible legend that names the group."
    },
    "description": {
      "type": "node",
      "description": "Supporting content associated with the fieldset."
    },
    "disabled": {
      "type": "boolean",
      "default": false,
      "description": "Uses native fieldset disabling for descendant form controls."
    },
    "className": {
      "type": "string"
    }
  },
  "slots": {
    "children": {
      "type": "ReactNode",
      "required": true
    }
  },
  "composable_with": [
    "Field",
    "Input",
    "Checkbox",
    "FormErrorSummary"
  ],
  "never_inside": [
    "Button"
  ],
  "example": "<FormSection legend=\"Equipment details\" description=\"Use the registered name.\">\n  <Field controlId=\"resource-name\" label=\"Name\"><Input /></Field>\n</FormSection>"
}