Close

Label

Use labels to associate text with a form control. This is done using the for and id attributes on the label and the form control, respectively. 

<form>
    <div class="field">
        <div class="control">
            <label class="label" for="name">Name</label>
            <input id="name" type="text" class="input" name="textfield" />
        </div>
    </div>
</form>

Usage

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: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.

Each of them should be wrapped in a .control container.

When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

Accessibility

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.

Form labels can be marked up in one of two ways:

  1. Explicitly - setting the for attribute of the label equal to the id attribute of the form control being labelled.
  2. 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.

If you have any questions or suggestions for improvements, please contact the Web Team.