Input Label
A example input label accompanied by an input type of choice.
Label
Label
<label class="c-label | u-w-100% u-w-50%-@bp2" for="text_id">
<span class="c-label__text">Label</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="text_id" type="text" placeholder="This is a text field">
</span>
</label><label class="c-label | u-w-100% u-w-50%-@bp2" for="select_input">
<span class="c-label__text">Label</span>
<span class="c-label__input">
<select class="c-input c-input--select" id="select_input">
<option selected disabled>Please Select</option>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</span>
</label><div class="c-label">
<span class="c-label__text">Label</span>
<label class="c-label c-label--checkbox" for="checkbox1">
<input class="c-input c-input--checkbox" id="checkbox1" type="checkbox">
<span class="c-label__text">Check 1</span>
</label>
<label class="c-label c-label--checkbox" for="checkbox2">
<input class="c-input c-input--checkbox" id="checkbox2" type="checkbox">
<span class="c-label__text">Check 2</span>
</label>
<label class="c-label c-label--checkbox" for="checkbox3">
<input class="c-input c-input--checkbox" id="checkbox3" type="checkbox">
<span class="c-label__text">Check 3</span>
</label>
</div><div class="c-label">
<span class="c-label__text">Label</span>
<label class="c-label c-label--radio" for="radio1">
<input class="c-input c-input--radio" id="radio1" type="radio" name="radio">
<span class="c-label__text">Radio 1</span>
</label>
<label class="c-label c-label--radio" for="radio2">
<input class="c-input c-input--radio" id="radio2" type="radio" name="radio">
<span class="c-label__text">Radio 2</span>
</label>
<label class="c-label c-label--radio" for="radio3">
<input class="c-input c-input--radio" id="radio3" type="radio" name="radio">
<span class="c-label__text">Radio 3</span>
</label>
</div>Float Label
Save space by using the float label pattern. More info on this pattern here.
<label class="c-label c-label--float | u-w-100% u-w-50%-@bp2" for="float_id">
<span class="c-label__text">Label</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="float_id" type="text" placeholder="Placeholder">
</span>
</label>Label with Required Field
Provide guides when inputs are required to be filled in.
<label class="c-label | u-w-100% u-w-50%-@bp2" for="required_input">
<span class="c-label__text | u-block">
<span class="o-split">
<span class="o-split__title">
Label
<sup class="u-tc-red-600">*</sup>
</span>
</span>
</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="required_input" type="text" placeholder="Required" required aria-required="true"/>
</span>
</label>
<!--
* Define the asterisk elsewhere on the form, most users will understand a required input
* marked with a red asterisk. It's a common and well established pattern/symbol.
-->Stacked Labels
When more than one label is needed, stack them above one another
<label class="c-label | u-w-100% u-w-50%-@bp2" for="stacked_input">
<span class="c-label__text | u-block">
<span class="o-split">
<span class="o-split__title">
Price (£)
<sup class="u-tc-red-600">*</sup>
</span>
</span>
<span class="o-split | u-muted:50%">
<span class="o-split__title">Min Price</span>
<span>Max Price</span>
</span>
</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="stacked_input" type="text" placeholder="Required" aria-required="true"/>
</span>
</label>Inline Labels
Horizontally align labels next to the input.
<label class="c-label c-label--inline | u-w-100% u-w-50%-@bp2">
<span class="c-label__text">Label</span>
<span class="c-label__input">
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
</span>
</label><label class="c-label c-label--inline | u-w-100% u-w-50%-@bp2">
<span class="c-label__input">
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
</span>
<span class="c-label__text">Label</span>
</label>Label, Input and Icons
Set an icon to the far side of the input.
<label class="c-label | u-w-100% u-w-50%-@bp2" for="icon_input">
<span class="c-label__text">Label</span>
<span class="c-label__input">
<span class="c-label__icon">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="nonzero" d="M8 3.002a8.43 8.43 0 0 1 3.559.739c.862.4 1.636.953 2.28 1.63a7.456 7.456 0 0 1 1.585 2.404l.075.226-.08.226C14.245 11.143 11.28 13.05 8 13 4.76 13 1.472 11.07.576 8.227L.501 8l.08-.226a7.57 7.57 0 0 1 1.58-2.404 7.534 7.534 0 0 1 2.28-1.63A8.429 8.429 0 0 1 8 3ZM8 4.43C5.447 4.354 3.104 5.77 2.089 8 3.104 10.234 5.447 11.649 8 11.573c2.553.076 4.895-1.34 5.911-3.571C12.897 5.768 10.553 4.352 8 4.43ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
</svg>
</span>
<input class="c-input c-input--text" id="icon_input" type="text" placeholder="This is a text field">
</span>
</label> Note: Only usable with text based inputs.
Be sure to check accessibility guides when using icons.
Be sure to check accessibility guides when using icons.
Label, Input and Button Icon
Make the icon clickable by using a button or link element.
<label class="c-label | u-w-100% u-w-50%-@bp2" for="icon_btn_input">
<span class="c-label__text">Label</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="icon_btn_input" type="text" placeholder="This is a text field"> <!-- Input first for tab index -->
<button class="c-label__btn | u-tc-blue-600 u-tc:hover-blue-800"> <!-- Button second for tab index -->
<span class="u-hidden">Get Address</span> <!-- Accessible Text -->
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" stroke-width="1.5" transform="translate(1 1)">
<circle cx="7" cy="7" r="5"/><path stroke-linecap="round" d="M12.5 7H14M0 7h1.5M7 1.5V0m0 14v-1.5"/>
</g>
</svg>
</button>
</span>
</label>Label, Input and Notes
Place a small not underneath a text input. Can be useful for helping guide users, and or placing validation comments.
<label class="c-label | u-w-100% u-w-50%-@bp2" for="text_id">
<span class="c-label__text | u-block">
<span class="o-split">
<span class="o-split__title">
Label
<sup class="u-tc-red-600">*</sup>
</span>
</span>
</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="text_id" type="text" placeholder="Required" required aria-required="true">
</span>
<span class="c-note">A message for users after the input.</span>
</label><label class="c-label | u-w-100% u-w-50%-@bp2" for="text_notes_id">
<span class="c-label__text | u-block">
<span class="o-split">
<span class="o-split__left">
Label
<sup class="u-tc-red-600">*</sup>
</span>
</span>
</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="text_notes_id" type="text" placeholder="Required" required aria-required="true">
</span>
<span class="c-note">Message 1: A message for users after the input.</span>
<span class="c-note">Message 2: A message for users after the input.</span>
<span class="c-note">Message 3: A message for users after the input.</span>
</label>