⚡️ Download 385 HTML, CSS, JS Components and 9 templates for $129 - Limited time offer ⏳


Progress value is 30%

Radio Checkbox Buttons

Custom radio and checkbox buttons.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but 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">
    <input class="radio" type="radio" name="radio-buttons" id="radio1" checked>
    <label for="radio1">Choice 1</label>

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

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;

Project duplicated

Project created

Globals imported

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