Switch to WilmingtonLabel
Labels accompany form input components to tell a user what information to enter. These classes are designed for <label> elements but may also be used with <span> or header elements to style text that does not label inputs.
Usage
Use the label when designing an input field not available in the Currency Input Field patterns. It is not semantic to use a label element without a corresponding input element.
<label class="c-label">Label Name</label>
Accessibility
Label elements must be programatically associated with their corresponding input. Do this by including an
@id
attribute on the input tag and a@for
attribute on the label tag with identical values.<label for="FirstName">
<input id="FirstName">
You may also associate the label and the input by nesting the input within the label element. If the input is a child of the label, it is not necessary to include the attributes.
<input />
</label>
Design Environment
A label must have a bottom margin of at least 8px
l-margin-bottom--xsmall
between it and its corresponding input. The width should not exceed 280 px.