Components
Labels
Input labels provide context and instruction for form elements. Seattle Times labels use sentence case capitalization and no colon after.
Core Component
Accessiblity
All inputs should have a properly associated label. If the visual design of your form does not include a label you can hide it from non-screen-readers with the `.visually-hidden` utility class.The basic .st-label has sans-serif, normal-weight text, with the same font size as body text. It is acceptable to either wrap labels around input elements or make them siblings of input elements, associated with the for="id" attribute.
Modifiers
Modifier classes can be combined with a core component to affect, for example, layout or size. But they can also be used on their own. Helptext and error are modifiers because they don’t extend the label core component - they have an overall different visual style. They can be used with the core .st-label class, or on a standalone element that provides additional information about the input field.
Block
.label--block - A common pattern in Seattle Times forms are block inputs nested inside block labels.
Help Text
.label--helptext - Sometimes additional explanatory text is required. This modifier visually differentiates helpful hints from the form element’s label.
Error
.label--error - Indicates an error in form validation.