🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Radio Checkbox Buttons

Custom radio and checkbox buttons.

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

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="radioButton" id="radio1" checked>
    <label for="radio1">Choice 1</label>
  </li>

  <li>
    <input class="radio" type="radio" name="radioButton" 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: 1em;
  --checkbox-radio-translate-y: 0.15em; // edit to align buttons with labels
  --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: 0.185em;
}

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us