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
All variants use --font-label, the same font as Button, with their own text sizes. They follow the themed --body-family.
Add .c-label-button--small for smaller text on the default button.
Use .c-label-button--radio-left|right for a visible radio indicator before or after the text. Unchecked indicators have a themed border; checked indicators keep their native rendering and can vary between browsers and operating systems.
Place the radio input directly inside the label. Use o-flex o-flex--column for stacked text and typography utilities for titles and descriptions. Use spans and small elements inside labels rather than divs, headings or paragraphs to keep the markup valid.
Combine either radio modifier with .c-label-button--small for a more compact button with smaller text and radio indicator. The button highlights on hover and keyboard focus.
Set --selected-color to override the checked and active state color. Buttons without a radio modifier use it as a background, falling back to --secondary-container. Radio variants use it for the border and indicator and keep their background and text color. The button border falls back to --secondary; the indicator uses --label-color when set, otherwise --secondary. Indicators use --negative for .input-validation-error, aria-invalid="true" or :user-invalid, and --outline when disabled.
An optional non-interactive c-pill span can sit between the content and input, for example to mark a new option. Keep links and buttons out of the label.
TIP
To override the default border radius, set --button-radius to a different value.
What it looks like
Code examples
<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><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><fieldset class="c-fieldset u-margin-bottom--large">
<legend>Ticket delivery (left aligned)</legend>
<label class="c-label-button c-label-button--radio-left">
<span class="o-flex o-flex--column">
<span class="u-font--boldest">Send complimentary tickets</span>
<small>Send tickets to the recipient free of charge.</small>
</span>
<input type="radio" name="delivery-left" value="send">
</label>
<label class="c-label-button c-label-button--radio-left">
<span class="o-flex o-flex--column">
<span class="u-font--boldest">Create a booking</span>
<small>Reserve the selected seats and send a payment link.</small>
</span>
<span class="c-pill u-color-green-lighter u-margin-left--auto"><span>New</span></span>
<input type="radio" name="delivery-left" value="save" checked>
</label>
<label class="c-label-button c-label-button--radio-left">
<span class="o-flex o-flex--column">Postal delivery (unavailable)</span>
<input type="radio" name="delivery-left" value="post" disabled>
</label>
</fieldset><fieldset class="c-fieldset u-margin-bottom--large">
<legend>Ticket delivery (right aligned)</legend>
<label class="c-label-button c-label-button--radio-right">
<span class="o-flex o-flex--column">
<span class="u-font--boldest">Send complimentary tickets</span>
<small>Send tickets to the recipient free of charge.</small>
</span>
<input type="radio" name="delivery-right" value="send">
</label>
<label class="c-label-button c-label-button--radio-right">
<span class="o-flex o-flex--column">
<span class="u-font--boldest">Create a booking</span>
<small>Reserve the selected seats and send a payment link.</small>
</span>
<span class="c-pill u-color-green-lighter u-margin-left--auto"><span>New</span></span>
<input type="radio" name="delivery-right" value="save" checked>
</label>
<label class="c-label-button c-label-button--radio-right">
<span class="o-flex o-flex--column">Postal delivery (unavailable)</span>
<input type="radio" name="delivery-right" value="post" disabled>
</label>
</fieldset><label class="c-label-button c-label-button--radio-left c-label-button--small">
<span class="o-flex o-flex--column u-gap--xs"><span class="u-font--boldest">Create a booking</span><small>Reserve seats and send a payment link.</small></span>
<input type="radio" name="delivery-small" value="booking" checked>
</label>
<label class="c-label-button c-label-button--radio-right c-label-button--small">
<span class="u-font--boldest">Send tickets</span>
<input type="radio" name="delivery-small" value="send">
</label>Accessibility notes
In forced colors mode, radio indicators keep native rendering for both states.
Keep the native input focusable. Radios in a group share a name; use a fieldset and legend to name the group. Clicking the label selects its radio, and keyboard arrow keys move between enabled options. Use the input's disabled attribute for unavailable options.
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.