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 <b-radiogroup> layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling.

Example new radio

HTML

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

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

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

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

<b-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>
</b-radiogroup>

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

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

CSS

Variables

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

SCSS

--radio-bg: transparent;
--radio-border-color: #{$radio-border-color};
--radio-checked-bg: #{$radio-checked-bg};
--radio-checked-border-color: #{$radio-checked-border-color};
--radio-disabled-bg: #{$radio-disabled-bg};
--radio-disabled-opacity: #{$radio-disabled-opacity};

Sass variables

SCSS

$radio-border-color: var(--border-color);
$radio-checked-bg: var(--primary-base);
$radio-checked-border-color: $radio-checked-bg;
$radio-disabled-bg: var(--bg-3);
$radio-disabled-opacity: .65;