Form Header

Contains information about the form's purpose, such as its title or a brief description.

A form's header is crucial for a positive and accessible user experience. The title and description provide a clear purpose and help users decide if the form is relevant.

The form header is the user’s point of entry to the form; it should contain the basic information about the form, like the action they are performing by filling and submitting the form, for example:

Add an agent

We also strongly recommend adding a brief description after the paragraph to explain why we need the data being requested from the user. To keep things clear, we highly recommend avoiding icons on the header.

Anatomy

The anatomy of the form header.

We recommend starting with a verb that describes the action to be performed when the user submits the form.

Paragraph: We recommend adding the main reason we ask the user for specific information, or a small context of the action that submitting the form will trigger. This can also have links to more in-depth documentation that the user can consult.

Styling

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

Spacing

Horizontal

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

Vertical

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

We recommend a bottom margin of formControl/form_header/padding_bottom (16px)

The spacing of the form header.

Color & Text Styles

Header

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

The color and text style of the header.

Paragraph

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