Logo
hummingbird

Radios

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

Class Name Type Description
form-check-input Component Checkbox
form-check-input-wrapper Component Checkbox Wrapper
form-check Component Checkbox Container
form-check-inline Component Checkbox Inline
form-check-label Component Checkbox Label
default Color Primary color (default)
form-check-secondary Color Secondary color
form-check-info Color Info color
form-check-success Color Success color
form-check-warning Color Warning color
form-check-danger Color Danger color
form-check-neutral Color Neutral color
default Size Small size (default)
form-check-md Size Medium size
form-check-lg Size Large size
btn-check Modifier Checkbox Button
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, use .form-check-md and .form-check-lg. 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 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>
CSS variables

The checkbox and radio component is built using a set of CSS variables. These variables provide flexibility for customizing styles.

.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%);
}