🎉 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-list/.checkbox-list class to the list element, and the .radio/.checkbox class to the input elements.

<ul class="radio-list 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>

The .radio-list and .checkbox-list classes are defined in the base/_forms.scss file of the framework.

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;

  // 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