Fieldset

In long forms, consider grouping inputs into fieldsets.

  • Bottom margin: @padding-large-vertical (24px)

Legend

Label each fieldset with a legend.

  • Case: Title Case (capitalize primary words)
  • Bottom margin is the document's base font size multiplied by the document's base line height (20px in desktop widths) *
  • Font weight: bold *
  • Font size is 150% of the document's base font size *
  • Italicized *
  • Color: @brand-primary (#F8971D) *
  • The bottom border is solid, 1px thick, and #e5e5e5 color *

* Automatic when the legend element is placed inside a fieldset element, e.g.<fieldset><legend>Legend Title</legend>...</fieldset>

Fieldset Title

"Required" Message

  • Place above the field inputs in the same column as the field labels
  • Align: left
  • Font size is 85% relative to surrounding text *
  • Italicized *
  • Color is @brand-danger (#c9442a) *
  • Place a @brand-danger (#c9442a) colored asterisk before "required" message *

* Automatic when .required-message class is added to parent element, e.g.<div class="required-message">Required</div>

Required

Labels

  • Case: Title Case (capitalize primary words)(per Melanie D. email 2017/08/28)

"Required" Inputs

  • Place a @brand-danger (#c9442a) colored asterisk (*) before "required" field labels *

* Automatic when .required class is added to a label, e.g.<label class="required">

Desktop/Tablet Widths

  • Place to the left of respective input field *
  • Align right *
  • Place "Required" asterisk before the field label and separated with a space *

* Automatic when the label element is used, e.g.<label>Input Label</label>

Mobile Widths

  • Place above the respective input field *
  • Align left *
  • Place "Required" asterisk after the field label and separated with a space *

Select Options

  • Case: Sentence case

Placeholder Text

  • Case: Sentence case
  • Color: @input-color-placeholder (#999)

Helper Text (e.g. input requirements)

  • Place immediately below the relevant input field
  • Do not end with a period unless it contains two or more sentences
  • Top margin is 5px *
  • Bottom margin is 10px *
  • Color is the document's text color lightened 25% *
  • Font size is 85% relative to surrounding text *

* Automatic when .help-block class is added to parent element, e.g.<span class="help-block">Cannot contain spaces</span>

Help Block - Input must be at least 10 characters

Form Validation

  • Outline an input field with the Network Health green (#b2d234) when it is valid
  • Outline an input field with the Network Health red (#c9442a) when it is invalid
  • Display a Network Health green (#b2d234) checkmark when the input is valid
  • Display a Network Health red (#c9442a) X when the input is invalid

Examples