Labels
Use the label class to identify a form element. Use the grid to aid in positioning the label in the layout.
Labels require specific markup and element arrtibutes to make them accessible. For more detail check the markup, aria-labelledby and aria-describedby
Examples
Default styling
Do You Use Your Powers For Good?
.label--inline
Keeps radio buttons and/or checkboxes, wrapped in a label, on the same line.
Do You Use Your Powers For Good?
.label--light
Lightens the label text.
Do You Use Your Powers For Good?
Markup: forms/forms-label.html
<div class="grid">
<div class="grid__row grid__row--padded">
<div class="
grid__col--lg-4
grid__col--md-4
grid__col--sm-12
grid__col--xs-12
">
<p id="labels-[modifier class]-group">Do You Use Your Powers For Good?</p>
<div role="radiogroup" aria-labelledby="labels-[modifier class]-group">
<label class="label [modifier class]" for="label-always-[modifier class]">
<input
class="radio"
id="label-always-[modifier class]"
type="radio"
name="good-powers"
/>
Always!
</label>
<label class="label [modifier class]" for="label-never-[modifier class]">
<input
class="radio"
id="label-never-[modifier class]"
type="radio"
name="good-powers"
/>
Never!
</label>
<label class="label [modifier class]" for="label-sometimes-[modifier class]">
<input
class="radio"
id="label-sometimes-[modifier class]"
type="radio"
name="good-powers"
/>
Sometimes...
</label>
</div>
</div>
</div>
</div>
Source:
forms/_forms.scss, line 98