Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.0.0
@intility/bifrost-react@6.1.1
@intility/bifrost-react-datepicker@6.0.1
@intility/bifrost-react-select@6.0.0
/
/
/
Radio button

Radio button

Also see /react/checkbox#radio-buttons
React component

Custom icons

Since it's practically impossible to style the native browser radio button, we have opted to replace it with custom icons instead.

The .bf-checkbox-unchecked icon will be hidden as long as the radio is :checked, and vice versa for .bf-checkbox-checked.

We recommend fa-solid fa-circle-dot when checked, and fa-regular fa-circle for the unchecked state.

Group multiple radio buttons together by applying the same name to them. Use the checked attribute to pre-select an option.

<label class="bf-checkbox">
  <input type="radio" name="radioDemo" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  NRK P1
</label>
<label class="bf-checkbox">
  <input type="radio" name="radioDemo" checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Radio Norge
</label>

<label class="bf-checkbox">
  <input type="radio" name="radioDemo" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  NRK P1
</label>
<label class="bf-checkbox">
  <input type="radio" name="radioDemo" checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Radio Norge
</label>

Button styling

<label class="bf-checkbox bf-checkbox-button">
  <input type="radio" name="radioButtonStyling" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  NRK P1 Button
</label>
<label class="bf-checkbox bf-checkbox-button">
  <input type="radio" name="radioButtonStyling" checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Radio Norge Button
</label>

<label class="bf-checkbox bf-checkbox-button">
  <input type="radio" name="radioButtonStyling" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  NRK P1 Button
</label>
<label class="bf-checkbox bf-checkbox-button">
  <input type="radio" name="radioButtonStyling" checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Radio Norge Button
</label>

Small button size

<label class="bf-checkbox bf-checkbox-button bf-checkbox-small">
  <input type="radio" name="radioSmallButton" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  NRK P1 Small button
</label>
<label class="bf-checkbox bf-checkbox-button bf-checkbox-small">
  <input type="radio" name="radioSmallButton" checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Radio Norge Small button
</label>

<label class="bf-checkbox bf-checkbox-button bf-checkbox-small">
  <input type="radio" name="radioSmallButton" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  NRK P1 Small button
</label>
<label class="bf-checkbox bf-checkbox-button bf-checkbox-small">
  <input type="radio" name="radioSmallButton" checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Radio Norge Small button
</label>

Hidden label

  • Apply .bf-checkbox-hidelabel on the wrapper
  • Omit the text inside <label>
  • Apply an aria-label to the <input> for accessibility
<label class="bf-checkbox bf-checkbox-hidelabel">
  <input type="radio" name="hideLabel" aria-label="NRK P1" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
</label>
<label class="bf-checkbox bf-checkbox-hidelabel">
  <input type="radio" name="hideLabel" aria-label="Radio Norge" checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
</label>

<label class="bf-checkbox bf-checkbox-hidelabel">
  <input type="radio" name="hideLabel" aria-label="NRK P1" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
</label>
<label class="bf-checkbox bf-checkbox-hidelabel">
  <input type="radio" name="hideLabel" aria-label="Radio Norge" checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
</label>

Disabled

<label class="bf-checkbox">
  <input type="radio" name="disabledRadio" disabled />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Disabled
</label>
<label class="bf-checkbox">
  <input type="radio" name="disabledRadio" disabled checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Disabled checked
</label>

<label class="bf-checkbox">
  <input type="radio" name="disabledRadio" disabled />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Disabled
</label>
<label class="bf-checkbox">
  <input type="radio" name="disabledRadio" disabled checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Disabled checked
</label>

Sandbox

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bf-page-padding bfl-grid">
  <label class="bf-checkbox">
    <input type="radio" name="radioDemo" />
    <span class="bf-checkbox-icon">
      <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
      <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
    </span>
    NRK P1
  </label>
  <label class="bf-checkbox">
    <input type="radio" name="radioDemo" checked />
    <span class="bf-checkbox-icon">
      <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
      <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
    </span>
    Radio Norge
  </label>
</div>
Open on CodeSandboxOpen Sandbox