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 for a smaller title font on the default button.

Use .c-label-button--radio-left or .c-label-button--radio-right for a visible native radio indicator before or after the text (left/right in left-to-right layouts). Its appearance follows the browser and operating system.

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 smaller text, padding and spacing, and a 1rem indicator instead of 1.25rem.

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, falling back to --secondary, and keep their background and text color.

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

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>

Radio left

<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>

Radio right

<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>

Small radio indicators

<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

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.