Skip to main contentCarbon Design System

Form

Color

Refer to the text input, dropdown, checkbox, radio button, toggle, and button pages for specific typography details on each component.

Example of form fields in the two colors

Typography

Form headings and labels should be set in sentence case with the first letter of the first word capitalized. Refer to the text input, dropdown, checkbox, radio button, toggle, and button pages for specific typography details on each component.

ElementFont-size (px/rem)Font-weightType token
Heading28 / 1.75Regular / 400$heading-03
Label12 / 0.75Regular / 400$label-01
Field text14 / 0.875Regular / 400$body-compact-01
Helper text12 / 0.75Regular / 400$helper-text-01
Error message12 / 0.75Regular / 400$label-01

Structure

Forms are made up of several different components. The order in which these elements are arranged is flexible and by default the vertical spacing between elements follow the guidelines below. The vertical spacing in a default form can be adjusted to be smaller than the default depending on the use case or layout.

Forms can be one column or two. The width of each column varies based on the content and layout of the design. On mobile, forms can only have one column.

ElementPropertypx / remSpacing token
Form itemsmargin-bottom32 / 2$spacing-07
Title areamargin-bottom40 / 2.5$spacing-08
Gutter between items32 / 2$spacing-07
Buttonsmargin-top48 / 3$spacing-09
Structure and spacing measurements for a double column form

Structure and spacing measurements for a double column form | px / rem

ElementPropertypx / remSpacing token
Form itemsmargin-bottom0 px
Title areamargin-bottom40 / 2.5$spacing-08
Gutter between items1 px
Buttonsmargin-top48 / 3$spacing-09
Structure and spacing measurements for a single column form

Structure and spacing measurements