FormSection

A form section is one part of a large form: a small heading, an optional status chip, one line on what the part is for, then its fields. A large form is a stack of them, in the wide Dialog or in a Drawer; the two use the same section.

When to use

How the large form dialog is built around its sections is in Forms.

Anatomy

FormSection is one part. It renders, in order:

• The heading: text-footnote, bold, in foreground-muted. Required.
• The status, at the end of the heading row: a soft, muted Badge. Optional.
• The description, under the heading: text-footnote in foreground-hint. Optional.
• Its children: the fields (Field), and any action rows.

Behavior

• Fields in a section are 12px apart.
• Sections are 16px apart, with a line-hairline between two sections. The first section starts flush with the top of the body.

Content

• Write the status as one quiet word on where the section stands: Complete, Optional, Off, Private.
• Write the description as one line on what the section is for: "Public identity and Marketplace-facing metadata."

Accessibility

• FormSection renders a section with an h3 heading. Put it under a dialog or drawer title, which is the level above.
• Give each section an id when a DialogNav links to it, so the section list can jump there.

Rules

• Write actions inside a section as ordinary rows, and show only the sections that can be filled in before an item is saved, as in Forms.