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.

Variants

Add .c-label-button--small when you need a more compact label button with the smaller title font.

TIP

To override the default border radius, set --button-radius to a different value.

What it looks like

Code examples

Default

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

Small

<label class="c-label-button c-label-button--small">100 kr<input type="radio" name="radio2" id="radio2-1" value="1"/></label>
<label class="c-label-button c-label-button--small">200 kr<input type="radio" name="radio2" id="radio2-2" value="2" checked/></label>
<label class="c-label-button c-label-button--small">300 kr<input type="radio" name="radio2" id="radio2-3" value="3"/></label>
<label class="c-label-button c-label-button--small">400 kr<input type="radio" name="radio2" id="radio2-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.