Checkbox & Radio

Default Checks

Here, the checked checkbox that you can use. 

<div class="flex flex-col gap-2">
  <div class="flex items-center gap-2"> 
      <label class="cursor-pointer checkbox checkbox-md">
          <input type="checkbox" class="peer"  id="remember" checked=""/>
          <div class="checkbox-indicator peer-checked:!bg-primary !border-primary">
             <i data-feather="check"></i>
          </div>
      </label>
      <label for="remember">Remember Me</label>
  </div>
  <div class="flex items-center gap-2"> 
      <label class="cursor-pointer checkbox checkbox-md">
          <input type="checkbox" class="peer" id="save" checked=""/>
          <div class="checkbox-indicator peer-checked:!bg-primary !border-primary">
             <i data-feather="check"></i>
          </div>
      </label>
      <label id="save">Save It</label>
  </div> 
</div>

Disabled Checks

Set the disabled checkbox, use .disabled class.

Disabled Checkbox

Disabled Checked Checkbox

<div class="flex flex-col gap-2">
  <div class="flex items-center gap-2 opacity-40"> 
      <label class="cursor-pointer checkbox checkbox-md">
          <input type="checkbox" class="peer" disabled>
          <div class="checkbox-indicator peer-checked:!bg-warning !border-warning">
             <i data-feather="check"></i>
          </div>
      </label>
      <p>Disabled Checkbox</p>
  </div> 
  <div class="flex items-center gap-2 opacity-40"> 
      <label class="cursor-pointer checkbox checkbox-md">
          <input type="checkbox" class="peer" disabled checked>
          <div class="checkbox-indicator peer-checked:!bg-warning !border-warning">
             <i data-feather="check"></i>
          </div>
      </label>
      <p>Disabled Checked Checkbox</p>
  </div> 
</div>

Right Checks

Set the default checkbox inside the project. 

<div class="flex flex-col gap-2">
  <div class="flex items-center gap-2"> 
      <label for="reverse">Reverse Checkbox</label>
      <label class="cursor-pointer checkbox checkbox-md">
          <input type="checkbox" id="reverse" class="peer">
          <div class="checkbox-indicator peer-checked:!bg-secondary !border-secondary">
             <i data-feather="check"></i>
          </div>
      </label>
  </div> 
  <div class="flex items-center gap-2"> 
      <label for="revers">Reverse Checked Checkbox</label>
      <label class="cursor-pointer checkbox checkbox-md">
          <input type="checkbox" id="revers" class="peer" checked>
          <div class="checkbox-indicator peer-checked:!bg-secondary !border-secondary">
             <i data-feather="check"></i>
          </div>
      </label>
  </div> 
</div>

Default Radio

Here, the basic radio that you can use. 

<div class="flex flex-col gap-2">
  <div class="radio-button radio-sm primary">
     <input id="radio1" type="radio" class="selector3" checked>
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="radio1"> Radio Checked </label>
  </div>
  <div class="radio-button radio-sm primary"> 
     <input id="radio2" type="radio" class="selector3">
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="radio2"> Radio Checks </label>
  </div>
</div>

Disabled Radio

To set the disabled radio, use .disabled class. 

<div class="flex flex-col gap-2">
  <div class="radio-button radio-sm danger opacity-40">
     <input id="disable1" type="radio" class="selector5" disabled>
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="disable1"> Radio 1 </label>
  </div>
  <div class="radio-button radio-sm danger opacity-40"> 
     <input id="disable2" type="radio" class="selector5" disabled checked>
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="disable2"> Radio 2 </label>
  </div>
</div>

Right Radios

Add default radio inside the project. 

<div class="flex flex-col gap-2">
  <div class="radio-button radio-sm success">
     <label class="text-xs cursor-pointer" for="default1"> Right Radio </label>
     <input id="default1" type="radio" class="selector4">
     <div class="check"></div>
  </div>
  <div class="radio-button radio-sm success"> 
     <label class="text-xs cursor-pointer" for="default2"> Right Radio Checked </label>
     <input id="default2" type="radio" class="selector4" checked>
     <div class="check"></div>
  </div>
</div>

Colored checkbox

Add the sizes of checkbox with different colored using .checkbox-* & .bg-* class. 

<div class="flex flex-col gap-2">
  <div class="flex items-center gap-2"> 
      <label checkbox checkbox-md cursor-pointer">
          <input type= 'checkbox'class="peer" id="warn">
          <div checkbox-indicator class="peer-checked:!bg-warning !border-warning">
              <i data-feather="check"></i>
          </div> 
      </label>
      <label for="warn">Warning - checkbox-solid-warning</label>
  </div> 
  <div class="flex items-center gap-2"> 
      <label checkbox checkbox-md cursor-pointer">
          <input type= 'checkbox'class="peer" id="inf" checked='checked'/>
          <div checkbox-indicator class="peer-checked:!bg-info !border-info">
              <i data-feather="check"></i>
          </div> 
      </label>
      <label for="Inf">Info - checkbox-solid-info</label>
  </div> 
  <div class="flex items-center gap-2"> 
      <label checkbox checkbox-md cursor-pointer">
          <input type= 'checkbox'class="peer" id="dan" checked='checked'/>
          <div checkbox-indicator class="peer-checked:!bg-danger !border-danger">
              <i data-feather="check"></i>
          </div> 
      </label>
      <label for="dan">Danger - checkbox-solid-danger</label>
  </div> 
  <div class="flex items-center gap-2"> 
      <label checkbox checkbox-md cursor-pointer">
          <input type= 'checkbox' id="success" class="peer"/>
          <div checkbox-indicator class="peer-checked:!bg-success !border-success">
              <i data-feather="check"></i>
          </div> 
      </label>
      <label for="success">Success - checkbox-solid-success</label>
  </div> 
</div>

Colored Radio

Set the sizes of checkbox with different colored using .radio-* class. 

<div class="flex flex-col gap-2">
  <div class="radio-button radio-md primary">
     <input id="primary1" type="radio" class="selector">
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="primary1"> Koho Theme - Laravel & React Js Admin </label>
  </div>
  <div class="radio-button radio-md secondary"> 
     <input id="secondary2" type="radio" class="selector">
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="secondary2"> Roxo Theme - Ready to use TailwindCSS </label>
  </div>
  <div class="radio-button radio-md info">
     <input id="info2" type="radio" class="selector" checked>
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="info2"> Voxo Theme - E-Commerce html template </label>
  </div>
  <div class="radio-button radio-md warning"> 
     <input id="warning2" type="radio" class="selector" >
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="warning2"> Zeta Theme - Multipurpose Dashboard </label>
  </div> 
</div>

Icon Checks

Add the sizes of checkbox with different colored using .checkbox-* & .bg-* class. 

<div class="main-icon-checkbox checkbox-primary checkbox">
  <ul class="checkbox-wrapper"> 
      <li>
          <input type='checkbox' id="checkbox-icon" class="form-check-input"/>
          <label class="cursor-pointer form-check-label" for='checkbox-icon'>
              <i data-feather="sliders"></i>
              <span>Sliders</span>
          </label> 
      </li>
      <li>
          <input type='checkbox' id="checkbox-icon1" class="form-check-input" checked/>
          <label class="cursor-pointer form-check-label" for='checkbox-icon1'>
              <i data-feather="user"></i>
              <span>User</span>
          </label> 
      </li>
      <li>
          <input type='checkbox' id="checkbox-icon2" class="form-check-input"/>
          <label class="cursor-pointer form-check-label" for='checkbox-icon2'>
              <i data-feather="tag"></i>
              <span>Tag</span>
          </label> 
      </li>
      <li>
          <input type='checkbox' id="checkbox-icon3" class="form-check-input"/>
          <label class="cursor-pointer form-check-label" for='checkbox-icon3'>
              <i data-feather="loader"></i>
              <span>Loader</span>
          </label> 
      </li>
      <li>
          <input type='checkbox' id="checkbox-icon4" class="form-check-input"/>
          <label class="cursor-pointer form-check-label" for='checkbox-icon4'>
              <i data-feather="eye-off"></i>
              <span>Hidden</span>
          </label> 
      </li>
      <li>
          <input type='checkbox' id="checkbox-icon5" class="form-check-input"/>
          <label class="cursor-pointer form-check-label" for='checkbox-icon5'>
              <i data-feather="folder"></i>
              <span>Folder</span>
          </label> 
      </li>
      <li>
          <input type='checkbox' id="checkbox-icon6" class="form-check-input"/>
          <label class="cursor-pointer form-check-label" for='checkbox-icon6'>
              <i data-feather="map-pin"></i>
              <span>Map</span>
          </label> 
      </li>
      <li>
          <input type='checkbox' id="checkbox-icon7" class="form-check-input"/>
          <label class="cursor-pointer form-check-label" for='checkbox-icon7'>
              <i data-feather="wifi"></i>
              <span>Network</span>
          </label> 
      </li>
  </ul>
</div>

Icon Radios

Add the sizes of checkbox with different colored using .radio-* & .bg-* class. 

<div class="main-icon-radio radio radio-primary">
  <ul class="radio-wrapper"> 
      <li>
          <input type='radio' id="radio-icon" class="form-check-input" name='radio2' value='option2'/>
          <label class="cursor-pointer form-check-label" for='radio-icon'>
              <i data-feather="sliders"></i>
              <span>Sliders</span>
          </label> 
      </li>
      <li>
          <input type='radio' id="radio-icon4" class="form-check-input" name='radio2' value='option2' checked/>
          <label class="cursor-pointer form-check-label" for='radio-icon4'>
              <i data-feather="eye-off"></i>
              <span>Hidden</span>
          </label> 
      </li>
      <li>
          <input type='radio' id="radio-icon5" class="form-check-input" name='radio2' value='option2'/>
          <label class="cursor-pointer form-check-label" for='radio-icon5'>
              <i data-feather="folder"></i>
              <span>Folder</span>
          </label> 
      </li>
      <li>
          <input type='radio' id="radio-icon7" class="form-check-input" name='radio2' value='option2'/>
          <label class="cursor-pointer form-check-label" for='radio-icon7'>
              <i data-feather="wifi"></i>
              <span>Network</span>
          </label> 
      </li>
      <li>
          <input type='radio' id="radio-icon8" class="form-check-input" name='radio2' value='option2'/>
          <label class="cursor-pointer form-check-label" for='radio-icon8'>
              <i data-feather="map-pin"></i>
              <span>Map</span>
          </label> 
      </li>
      <li>
          <input type='radio' id="radio-icon9" class="form-check-input" name='radio2' value='option2'/>
          <label class="cursor-pointer form-check-label" for='radio-icon9'>
              <i data-feather="delete"></i>
              <span>Trash</span>
          </label> 
      </li>
      <li>
          <input type='radio' id="radio-icon10" class="form-check-input" name='radio2' value='option2'/>
          <label class="cursor-pointer form-check-label" for='radio-icon10'>
              <i data-feather="user"></i>
              <span>User</span>
          </label> 
      </li>
      <li>
          <input type='radio' id="radio-icon11" class="form-check-input" name='radio2' value='option2'/>
          <label class="cursor-pointer form-check-label" for='radio-icon11'>
              <i data-feather="play"></i>
              <span>Play</span>
          </label> 
      </li>
  </ul> 
</div>

Checkbox Sizes

Add the sizes of checkbox, using .checkbox-* class. 

<div class="flex flex-wrap gap-3">
  <div class="flex items-center gap-2"> 
      <label checkbox checkbox-xl cursor-pointer">
          <input type= 'checkbox'class="peer" id="Checkout-xl"  checked='checked'/>
          <div checkbox-indicator class="peer-checked:!bg-success !border-success">
              <i data-feather="check"></i>
          </div> 
      </label>
      <label for="Checkout-xl">Checkout-xl</label>
  </div>
  <div class="flex items-center gap-2"> 
      <label checkbox checkbox-lg cursor-pointer">
          <input type= 'checkbox' id="Checkout-lg" class="peer"/>
          <div checkbox-indicator class="peer-checked:!bg-success !border-success">
              <i data-feather="check"></i>
          </div> 
      </label>
      <label for="Checkout-lg">Checkout-lg</label>
  </div> 
  <div class="flex items-center gap-2"> 
      <label checkbox checkbox-md cursor-pointer">
          <input type= 'checkbox' id="Checkout-md" class="peer"/>
          <div checkbox-indicator class="peer-checked:!bg-success !border-success">
              <i data-feather="check"></i>
          </div> 
      </label>
      <label for="Checkout-md">Checkout-md</label>
  </div> 
  <div class="flex items-center gap-2"> 
      <label checkbox checkbox-sm cursor-pointer">
          <input type= 'checkbox' id="Checkout-sm" class="peer" checked='checked'/>
          <div checkbox-indicator class="peer-checked:!bg-success !border-success">
              <i data-feather="check"></i>
          </div> 
      </label>
      <label for="Checkout-sm">Checkout-sm</label>
  </div> 
</div>

Radio Sizes

Set the sizes of radio, using .radio-* class.

<div class="flex flex-wrap items-center gap-3">
  <div class="radio-button radio-md primary">
     <input id="primary" type="radio" class="selector1">
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="primary"> Primary </label>
  </div>
  <div class="radio-button radio-md secondary"> 
     <input id="radio" type="radio" class="selector1">
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="secondary"> Secondary</label>
  </div>
  <div class="radio-button radio-md info">
     <input id="radio" type="radio" class="selector1">
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="info"> Info </label>
  </div>
  <div class="radio-button radio-md warning"> 
     <input id="radio" type="radio" class="selector1">
     <div class="check"></div>
     <label class="text-xs cursor-pointer" for="warning"> Warning </label>
  </div> 
</div>

Images with Checkbox

Add the sizes of checkbox, using .checkbox-* class. 

<div class="flex flex-wrap gap-3 main-img-checkbox">
  <div class="img-checkbox"> 
      <input type='checkbox'class="main-img-cover form-check-input" id="img-check-1" checked='checked'/>
      <div class="checkbox-indicator">
         <i data-feather="check"></i>
      </div>
      <label class="mb-0 cursor-pointer form-check-label" for="img-check-1">
          <img src="../../image.jpg" alt="..."/>
  </div>
  <div class="img-checkbox"> 
      <input type='checkbox'class="main-img-cover form-check-input" id="img-check-2" checked='checked'/>
      <div class="checkbox-indicator">
         <i data-feather="check"></i>
      </div>
      <label class="mb-0 cursor-pointer form-check-label" for="img-check-2">
          <img src="../../image.jpg" alt="..."/>
  </div>
  <div class="img-checkbox"> 
      <input type='checkbox'class="main-img-cover form-check-input" id="img-check-3" checked='checked'/>
      <div class="checkbox-indicator">
         <i data-feather="check"></i>
      </div>
      <label class="mb-0 cursor-pointer form-check-label" for="img-check-3">
          <img src="../../image.jpg" alt="..."/>
  </div>
  <div class="img-checkbox"> 
      <input type='checkbox'class="main-img-cover form-check-input" id="img-check-4" checked='checked'/>
      <div class="checkbox-indicator">
         <i data-feather="check"></i>
      </div>
      <label class="mb-0 cursor-pointer form-check-label" for="img-check-4">
          <img src="../../image.jpg" alt="..."/>
  </div>                          
</div>

Images with Radio

Add the sizes of checkbox, using .radio-* class. 

<div class="flex flex-wrap gap-3 main-img-checkbox">
  <div class="img-checkbox radio-button radio-sm primary"> 
      <input type='radio' class="main-img-cover form-check-input" id="img-radio-1" name='radio6' value='option3'/>
      <div class="check"></div>
      <label class="mb-0 cursor-pointer form-check-label" for="img-radio-1">
          <img src="../../image.jpg" alt="..."/>
      </label>
  </div>
  <div class="img-checkbox radio-button radio-sm primary"> 
      <input type='radio' class="main-img-cover form-check-input" id="img-radio-2" name='radio6' value='option3'/>
      <div class="check"></div>
      <label class="mb-0 cursor-pointer form-check-label" for="img-radio-2">
          <img src="../../image.jpg" alt="..."/>
      </label>
  </div>
  <div class="img-checkbox radio-button radio-sm primary"> 
      <input type='radio' class="main-img-cover form-check-input" id="img-radio-3" name='radio6' value='option3'/>
      <div class="check"></div>
      <label class="mb-0 cursor-pointer form-check-label" for="img-radio-3">
          <img src="../../image.jpg" alt="..."/>
      </label>
  </div>
  <div class="img-checkbox radio-button radio-sm primary"> 
      <input type='radio' class="main-img-cover form-check-input" id="img-radio-4" name='radio6' value='option3'/>
      <div class="check"></div>
      <label class="mb-0 cursor-pointer form-check-label" for="img-radio-4">
          <img src="../../image.jpg" alt="..."/>
      </label>
  </div> 
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode