Fieldset

Container elements are used to visually group related elements in a form.

Fieldsets are groups of semantically related form fields. They are used to break down a form into visually digestible sections for the user.

Anatomy

The anatomy of the fieldset header.

Fieldset Header: This is the header of the fieldset. We recommend being straightforward here and adding the relation between those fields, for example, “Address information.”

Paragraph (Optional): This paragraph is useful for giving the user context about the section they are about to fill out. We can also add links here to help the user fill out the form, like links to documentation or guides.

Form Field Stack: A stack of semantically related form fields. Click here for more information about stacking form controls.

This documentation references form tokens. Look at this table to learn more about all the related tokens.

The form header should respect the form's general horizontal margins.

The gap between the header and the paragraph should be formControl/fieldset/header/gap (4px).

We recommend a bottom margin of formControl/fieldset/header/padding_bottom (20px).

The spacing of the fieldset header.

If there are more fieldsets or form controls below, we recommend padding the bottom of the fieldset with formControl/fieldset/padding_bottom (48px).

Otherwise, we recommend leaving a spacing of form_control/form_body/padding_bottom (32px) between the fieldset and the footer.

The bottom paddingof a fieldset when there is more content below.

The bottom padding of a fieldset when there’s no more content below.

The form header uses foreground/container/high_emphasis for its text color and semantic/heading/md/bold for its text style.

The color and text styles of the fieldset header.

The form header uses foreground/container/mid_emphasis for its text color and semantic/body/md/regular for its text style.