Radio

Basic radio

Similar to checkboxes, radios are styled with the .radio class. However, there's no custom SVG as we use a Unicode character for the checked state.

HTML

<input type="radio" id="radio" class="radio" />

Label

Wrap the .radio in a .radiogroup layout wrapper and add your label. This sets some basic flexbox styling.

Example new radio

HTML

<div class="radiogroup">
  <input type="radio" id="radioLabel" class="radio" />
  <label for="radioLabel">Example new radio</label>
</div>

Theme colors

Modify the appearance of checked checkboxes by adding the .theme-{color} class to the .radio element. This will set the checked background and border color to the theme color.

HTML

<div class="radiogroup">
  <input type="radio" id="radioprimary" class="radio theme-primary" checked />
  <label for="radioprimary">Example primary radio</label>
</div>
<div class="radiogroup">
  <input type="radio" id="radioaccent" class="radio theme-accent" checked />
  <label for="radioaccent">Example accent radio</label>
</div>
<div class="radiogroup">
  <input type="radio" id="radiosuccess" class="radio theme-success" checked />
  <label for="radiosuccess">Example success radio</label>
</div>
<div class="radiogroup">
  <input type="radio" id="radiodanger" class="radio theme-danger" checked />
  <label for="radiodanger">Example danger radio</label>
</div>
<div class="radiogroup">
  <input type="radio" id="radiowarning" class="radio theme-warning" checked />
  <label for="radiowarning">Example warning radio</label>
</div>
<div class="radiogroup">
  <input type="radio" id="radioinfo" class="radio theme-info" checked />
  <label for="radioinfo">Example info radio</label>
</div>
<div class="radiogroup">
  <input type="radio" id="radioinverse" class="radio theme-inverse" checked />
  <label for="radioinverse">Example inverse radio</label>
</div>
<div class="radiogroup">
  <input type="radio" id="radiosecondary" class="radio theme-secondary" checked />
  <label for="radiosecondary">Example secondary radio</label>
</div>

Description

With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, <b-vstack>, to stack the label and description.

Example new radio Supporting description for the above label.

HTML

<div class="radiogroup">
  <input type="radio" id="radioLabelDescription" class="radio" />
  <b-vstack>
    <label for="radioLabelDescription">Example new radio</label>
    <small class="description">Supporting description for the above label.</small>
  </b-vstack>
</div>

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Example new radio

HTML

<div class="radiogroup">
  <input type="radio" id="radioDisabled" class="radio" disabled />
  <label for="radioDisabled">Example new radio</label>
</div>

CSS

Variables

CSS variables for the radio component are built on the Sass variables.

SCSS

// stylelint-disable-next-line scss/dollar-variable-default
$radio-tokens: defaults(
  (
    --radio-size: 1.25rem,
    --radio-margin-block: .125rem,
    --radio-bg: transparent,
    --radio-border-color: var(--border-color),
    --radio-checked-bg: var(--control-checked-bg),
    --radio-checked-border-color: var(--control-checked-border-color),
    --radio-disabled-bg: var(--control-disabled-bg),
    --radio-disabled-opacity: var(--control-disabled-opacity),
  ),
  $radio-tokens
);