Radio

Radio buttons allow users to select a single option from a set, ensuring that only one choice can be active at a time.

Basic radio

HTML

<label for="radioDefault" class="form-check-input-wrapper">
  <input class="form-check-input" type="radio" name="radioDefault" value="" id="radioDefault" />
</label>
<label for="radioChecked" class="form-check-input-wrapper">
  <input class="form-check-input" type="radio" name="radioDefault" value="" id="radioChecked" checked />
</label>
<label for="radioDisabled" class="form-check-input-wrapper">
  <input class="form-check-input" type="radio" name="radioDefault" value="" id="radioDisabled" disabled />
</label>

Radio with label

HTML

<div class="form-check">
  <label for="radioDefaultLabel" class="form-check-input-wrapper">
    <input class="form-check-input" type="radio" name="radioDefaultLabel" value="" id="radioDefaultLabel" />
  </label>
  <label for="radioDefaultLabel" class="form-check-label">Basic Checkbox</label>
</div>
<div class="form-check">
  <label for="radioCheckedLabel" class="form-check-input-wrapper">
    <input class="form-check-input" type="radio" name="radioDefaultLabel" value="" id="radioCheckedLabel" checked />
  </label>
  <label for="radioCheckedLabel" class="form-check-label">Checked</label>
</div>
<div class="form-check">
  <label for="radioDisabledLabel" class="form-check-input-wrapper">
    <input class="form-check-input" type="radio" name="radioDefaultLabel" value="" id="radioDisabledLabel" disabled />
  </label>
  <label for="radioDisabledLabel" class="form-check-label">Disabled</label>
</div>

Size

For medium and large radio buttons, use .form-check-md and .form-check-lg. The default is small.

HTML

<label for="radioSmall" class="form-check-input-wrapper">
  <input class="form-check-input" type="radio" name="radioSizes" value="" id="radioSmall" />
</label>
<label for="radioMedium" class="form-check-input-wrapper">
  <input class="form-check-input form-check-md" type="radio" name="radioSizes" value="" id="radioMedium" checked />
</label>
<label for="radioLarge" class="form-check-input-wrapper">
  <input class="form-check-input form-check-lg" type="radio" name="radioSizes" value="" id="radioLarge" />
</label>

Colors

Use color variants like .form-check-{secondary, info, success, warning, danger, neutral} to change the radio color. Default is primary.

HTML

<label for="radioPrimary" class="form-check-input-wrapper">
  <input class="form-check-input" type="radio" name="radioColors" value="" id="radioPrimary" />
</label>
<label for="radioSecondary" class="form-check-input-wrapper">
  <input class="form-check-input form-check-secondary" type="radio" name="radioColors" value="" id="radioSecondary" checked />
</label>
<label for="radioInfo" class="form-check-input-wrapper">
  <input class="form-check-input form-check-info" type="radio" name="radioColors" value="" id="radioInfo" />
</label>
<label for="radioSuccess" class="form-check-input-wrapper">
  <input class="form-check-input form-check-success" type="radio" name="radioColors" value="" id="radioSuccess" />
</label>
<label for="radioWarning" class="form-check-input-wrapper">
  <input class="form-check-input form-check-warning" type="radio" name="radioColors" value="" id="radioWarning" />
</label>
<label for="radioDanger" class="form-check-input-wrapper">
  <input class="form-check-input form-check-danger" type="radio" name="radioColors" value="" id="radioDanger" />
</label>
<label for="radioNeutral" class="form-check-input-wrapper">
  <input class="form-check-input form-check-neutral" type="radio" name="radioColors" value="" id="radioNeutral" />
</label>

Inline

Create inline checkboxes by using the .form-check-inline class.

HTML

<div class="form-check-inline">
  <label for="radioInline" class="form-check-input-wrapper">
    <input class="form-check-input" type="radio" name="inlineRadio" value="" id="radioInline" />
  </label>
  <label for="radioInline" class="form-check-label">Inline Radio</label>
</div>
<div class="form-check-inline">
  <label for="inlineChecked" class="form-check-input-wrapper">
    <input class="form-check-input" type="radio" name="inlineRadio" value="" id="inlineChecked" checked />
  </label>
  <label for="inlineChecked" class="form-check-label">Checked</label>
</div>
<div class="form-check-inline">
  <label for="inlineDisabled" class="form-check-input-wrapper">
    <input class="form-check-input" type="radio" name="inlineRadio" value="" id="inlineDisabled" disabled />
  </label>
  <label for="inlineDisabled" class="form-check-label">Disabled</label>
</div>

Checkbox toggle buttons

Create a button-like radio by using .btn styles rather than .form-check-label on the <label> elements.

HTML

<input class="btn-check" type="radio" name="radioBtnExample" value="" id="radioBtnDefault" />
<label for="radioBtnDefault" class="btn btn-primary">Default</label>

<input class="btn-check" type="radio" name="radioBtnExample" value="" id="radioBtnChecked" checked />
<label for="radioBtnChecked" class="btn btn-primary">Checked</label>

<input class="btn-check" type="radio" name="radioBtnExample" value="" id="radioBtnDisabled" disabled />
<label for="radioBtnDisabled" class="btn btn-primary">Disabled</label>

Class Overview

A list of all available utility classes for the radio component.

Class NameTypeDescription
form-check-inputComponentCheckbox
form-check-input-wrapperComponentCheckbox Wrapper
form-checkComponentCheckbox Container
form-check-inlineComponentCheckbox Inline
form-check-labelComponentCheckbox Label
defaultColorPrimary color (default)
form-check-secondaryColorSecondary color
form-check-infoColorInfo color
form-check-successColorSuccess color
form-check-warningColorWarning color
form-check-dangerColorDanger color
form-check-neutralColorNeutral color
defaultSizeSmall size (default)
form-check-mdSizeMedium size
form-check-lgSizeLarge size
btn-checkModifierCheckbox Button

CSS variables

The checkbox and radio component is built using a set of CSS variables. These variables provide flexibility for customizing styles. See the Theming to customize styles globally and apply overrides as needed.

.form-check-input {
  --form-check-input-bg: var(--background-color-default);
  --form-check-input-checked-bg: var(--color-primary);
  --form-check-input-with: --spacing(4);
  --form-check-input-height: --spacing(4);
  --form-check-input-border-width: 1px;
  --form-check-input-border-color: var(--border-color-base);
  --form-check-input-radius: var(--radius-sm);
  --form-check-bg-image: none;
}

.form-check-input-wrapper {
  --form-check-input-wrapper-bg: --alpha(var(--color-primary) / 12%);
}
Previous

Checkbox
Next

Switch