Use labels to associate text with a form control. This is done using the
id attributes on the label and the form control, respectively.
Text labels should generally describe the function of each form control. Place the label adjacent to its respective form control. Labels are usually positioned above or to the left of controls, however, the labels for checkboxes and radio buttons are usually to the right of the control.
Label text should be short and sentence case.
Avoid using colons at the end of labels.
The following form controls classes are supported:
Each of them should be wrapped in a
When combining several controls in a form, use the
.field class as a container, to keep the spacing consistent.
Form labels provide a number of accessibility benefits. When clicking on a control's
label element, focus will be applied to the control, thus increasing the size of the clickable area. Also, assistive technology can read the label each form control a blind user interacts with the control.
Form labels can be marked up in one of two ways:
- Explicitly - Setting the
forattribute of the
labelequal to the
idattribute of the form control being labelled.
- Implicity - Wrapping the form control within its label.
It is considered best practice to set the
for attribute because some assistive technologies do not understand implicit relationships.