Label button

When to use it

This component is intended to be used when radio buttons should look like those square buttons in an elevator or on those ancient TV's. They get their selected state when its child input field is checked.

What it looks like

Code examples

<label class="c-label-button">1<input type="radio" name="radio50" id="radio50-1" value="1"/></label>
<label class="c-label-button">2<input type="radio" name="radio50" id="radio50-2" value="2" checked/></label>
<label class="c-label-button">3<input type="radio" name="radio50" id="radio50-3" value="3"/></label>
<label class="c-label-button">4<input type="radio" name="radio50" id="radio50-4" value="4"/></label>

Accessibility notes

It's important to have a relationship between labels and inputs in your markup. In this component, the label is automatically associated with its input field (since its nested) but if for some reason the markup is altered, make sure you keep the relationship by adding a for attribute in the markup that points to a similar id attribute on the input.