Radio Checkbox Buttons

Custom radio and checkbox buttons.

How to

This component replaces the native radio and checkbox buttons with custom ones.

To replace the native buttons with custom ones, make sure to add the .radio/.checkbox class to the input elements.

<ul class="flex flex-column gap-xxxs">
  <li>
    <input class="radio" type="radio" name="radio-buttons" id="radio1" checked>
    <label for="radio1">Choice 1</label>
  </li>

  <li>
    <input class="radio" type="radio" name="radio-buttons" id="radio2">
    <label for="radio2">Choice 2</label>
  </li>
</ul>

To make customization easier, we've abstracted some styling options and stored them in CSS Variables:

:root {
  // radios and checkboxes
  --checkbox-radio-size: 18px;
  --checkbox-radio-gap: var(--space-xxxs); // gap between button and label
  --checkbox-radio-border-width: 2px;
  --checkbox-radio-line-height: var(--body-line-height);

  // radio buttons
  --radio-marker-size: 8px;

  // checkboxes
  --checkbox-marker-size: 12px;
  --checkbox-radius: 4px;
}

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗