Proper use of a label includes:

• Adding the CSS class label for base styling
• Adding a unique for attribute that links the label to the input it describes
• Adding a unique id attribute to the input that links the input to its label
• An input can have more than one label, but a label cannot describe more than one input

In addition to a label, consider adding more aids for the user:

• Help text under the Input
• A Tooltip to further provide instruction on hover/focus
• Placeholder text to the input
• Validation to help the user correct their data entry

You may also want to override the global margin spacing in between a label and input by using special margin CSS classes. The class margin-top--sibling--smallest is suggested to tighten the proximity between a label and an adjacent input.

Hiding Labels

You can hide a label by using a the sr-only CSS class, which allows screen readers to still access the labelbut visually hides the label for everyone else.

A label can be hidden when:

• Placeholder text has been added to the input
• The data to be entered into input is simple and can be entered without instruction
• Validation has been added to aid the user when incorrect data has been entered

To utilize, Insert a label-specific atom partial called "LabelAtom" via an Html Helper Extension method.

@Html.LabelAtom("label-id", "myTextBox", "MyLabel")

You will need to provide an Id, LabelFor id and Label Text however, all other parameters are optional. Provide optional parameters by entering the parameter name followed by ':' and the value.

@Html.LabelAtom("label-id", "myTextBox", "MyLabel", customClass: "label-class")