Radio & Checkbox

The Radio & Checkbox component provides a set of modern, customizable input controls including animated checkboxes, switches, and stylish radio buttons. These elements support various visual styles and can be easily integrated into forms and UIs.

Description #

This component includes three main input types:

• Switch: A toggle input styled as a sliding switch, ideal for on/off states.

• Checkbox BOM: An animated circular checkbox with a gooey effect and checkmark.

• Checkbox Magic: A square checkbox with a smooth animated checkmark.

• Radio Modern: A modern, animated radio button with a custom border and fill.

Examples and Classes #

Switch Example

            

                

                    
                        
                        

                    
                
            
            

                
                
HTML
                
            
            <div class="switch">
  <label for="switch-demo">
    <input type="checkbox" id="switch-demo" />
    <div class="switch-slider"></div>
  </label>
</div>
        

Checkbox BOM Example

            

                

                    
                    
                    
                    
                    
                
            
            

                
                
HTML
                
            
            <div class="checkbox-bom">
  <input id="checkbox-bom-demo" type="checkbox"/>
  <label for="checkbox-bom-demo"></label>
  <svg class="checkbox-bom-checkmark" width="15" height="14" viewBox="0 0 15 14" fill="none">
    <path class="checkbox-bom-checkmark" d="M2 8.36364L6.23077 12L13 2"></path>
  </svg>
  <!-- Gooey-->
  <svg style="width:0;height:0;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="bom-goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"></feGaussianBlur>
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -7" result="bom-goo"></feColorMatrix>
        <feBlend in="SourceGraphic" in2="bom-goo"></feBlend>
      </filter>
    </defs>
  </svg>
</div>
        

Checkbox Magic Example

            

                

                    
                    
                
            
            

                
                
HTML
                
            
            <div class="checkbox-magic">
  <input id="checkbox-magic-demo" type="checkbox" />
  <label for="checkbox-magic-demo"></label>
</div>
        

Radio Modern Example

            

                

                    
                    Modern Radio
                
            
            

                
                
HTML
                
            
            <div class="radio-modern">
  <input id="radio-modern-demo" type="radio" name="radio-modern" />
  <label class="on-primary-color" for="radio-modern-demo">Modern Radio</label>
</div>
        

Available Classes

Class	Description
.switch	Wrapper for the toggle switch input.
.switch-slider	The sliding element of the switch.
.checkbox-bom	Animated circular checkbox with gooey effect.
.checkbox-bom-checkmark	SVG checkmark for the BOM checkbox.
.checkbox-magic	Square animated checkbox with jelly effect.
.radio-modern	Modern styled radio button with animation.

Layout Variations

The Radio & Checkbox component supports different layout and style variations:

• Switch: Toggle input for on/off states
• Checkbox BOM: Animated circular checkbox
• Checkbox Magic: Animated square checkbox
• Radio Modern: Modern animated radio button

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/radio-checkbox/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/radio-checkbox/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/radio-checkbox/script.js	JavaScript functionality (currently not required)

SCSS Variables #

            

                
                
SCSS
                
            
            $checkbox-bom-size: 24px;
$checkbox-bom-border-width: 2px;
$checkbox-bom-border-color: "border";
$checkbox-bom-checked-bg-color-checked: "primary";
$checkbox-bom-checkmark-bg-color: "on-primary";

$checkbox-magic-size: 17px;
$checkbox-magic-border-width: 1px;
$checkbox-magic-border-color: "border";
$checkbox-magic-checked-bg-color: "primary";
$checkbox-magic-checkmark: "on-primary";

$switch-width: 60px;
$switch-height: 34px;
$switch-slider-bg-color: "disabled-regular";
$switch-slider-checked-bg-color: "primary";
$switch-slider-knob-bg-color: "on-primary";
$switch-transition: 0.4s;

$radio-modern-size: 1.5rem;
$radio-modern-border: 1px;
$radio-modern-border-color: "border";
$radio-modern-checked-bg-color: "primary";
        

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
N/A	-	No JavaScript is required for the default functionality of these components. All animations and interactions are handled via CSS.

Implementation Example

            

                
                
JavaScript
                
            
            // No JavaScript required for radio-checkbox, switch, or radio-modern components.
// All behavior and animation is handled by CSS.