Label

When to use it

The Label component is used for styling labels in forms and some "tags" situations. While the primary usage is on <label> elements, it could very well be used on <dt> (definition titles) or even as a decoration on <span>'s.

Variants

To override the default color, use the --label-color CSS variable on the element itself (or a parent element).

What it looks like

Code examples

In forms

<div class="c-form-control">
    <label for="id12" class="c-label">First name</label>
    <input id="id12" type="text" required />
</div>

Other

<span class="c-label">Consert</span>

Accessibility notes

The asterisk in the example above indicates a required input. It's depending on the Form control. The "*" character has an alternate text specified in the CSS file to make sure it's read out as "Required" in screen readers. Without this, CSS generated content as this becomes inaccessible and, frankly, it's debatable whether or not this indicator should be removed in favor of a markup based solution where accessibility (and localization) is more easily handled.