Roxo - Premium Admin Template

Checkbox

You can use checkbox as code show bellow

 <div class="flex flex-col flex-wrap items-center gap-2 my-2">
 <label checkbox class="w-[20px] h-[20px]">
    <input type= 'checkbox'class="peer"/>
    <div checkbox-indicator class="peer-checked:!bg-primary !border-primary"></div> 
        <i data-feather="check">
 </label>
</div>

With Label and Form-control

Use checkbox With Label and form-control

Preview Html

Remember Me

 <div class="flex flex-col flex-wrap items-center gap-2 my-2">
 <span class="text-gray-500"> Remember Me </span>
 <label checkbox class="w-[20px] h-[20px]">
    <input type= 'checkbox'class="peer"/>
    <div checkbox-indicator class="peer-checked:!bg-primary !border-primary"></div> 
        <i data-feather="check">
 </label>
</div>

Checkbox With Different Colors

Use different color checkbox by adding class bg-*

Preview Html

 <div class="flex flex-col flex-wrap items-center gap-2 my-2">
 <label checkbox class="w-[20px] h-[20px]">
    <input type= 'checkbox'class="peer"/>
    <div checkbox-indicator class="peer-checked:!bg-primary !border-primary"></div> 
        <i data-feather="check">
 </label>
</div>
<div class="flex flex-col flex-wrap items-center gap-2 my-2">
 <label checkbox class="w-[20px] h-[20px]">
    <input type= 'checkbox'class="peer"/>
    <div checkbox-indicator class="peer-checked:!bg-secondary !border-secondary"></div> 
        <i data-feather="check">
 </label>
</div>
<div class="flex flex-col flex-wrap items-center gap-2 my-2">
 <label checkbox class="w-[20px] h-[20px]">
    <input type= 'checkbox'class="peer"/>
    <div checkbox-indicator class="peer-checked:!bg-info !border-info"></div> 
        <i data-feather="check">
 </label>
</div>

Checkbox With Different Size

You can use different size checkbox by adding class .checkbox-(xs, sm, md, lg)

Preview Html

  <div class="flex flex-col flex-wrap items-center gap-2 my-2">
 <label checkbox class="checkbox-sm">
    <input type= 'checkbox'class="peer"/>
    <div checkbox-indicator class="peer-checked:!bg-primary !border-primary"></div> 
        <i data-feather="check">
 </label>
 <label checkbox class="checkbox-md">
    <input type= 'checkbox'class="peer"/>
    <div checkbox-indicator class="peer-checked:!bg-secondary !border-secondary"></div> 
        <i data-feather="check">
 </label>
 <label checkbox class="checkbox-lg">
    <input type= 'checkbox'class="peer"/>
    <div checkbox-indicator class="peer-checked:!bg-info !border-info"></div> 
        <i data-feather="check">
 </label>
 <label checkbox class="checkbox-xl">
    <input type= 'checkbox'class="peer"/>
    <div checkbox-indicator class="peer-checked:!bg-info !border-info"></div> 
        <i data-feather="check">
 </label>
</div>

Checkbox Disabled

You can disabled checkbox by adding disabled attribute

Preview Html

  <div class="flex flex-col flex-wrap items-center gap-2 my-2">
 <label checkbox class="checkbox-lg">
    <input type= 'checkbox'class="peer" disabled/>
    <div checkbox-indicator class="peer-checked:!bg-primary !border-primary"></div> 
        <i data-feather="check">
 </label>
</div>

Radio

You can use radio as code show bellow

Preview Html

 <input class="peer accent-info" type='radio' name='radio-1' checked='checked'/>

Radio width Different Colors

You can use different colors radio by adding .radio-(accent, primary, secondary) classes

Preview Html

  <input class="peer accent-info" type='radio' name='radio-1' checked='checked'/> 
<input class="peer accent-primary" type='radio' name='radio-1' checked='checked'/> 
<input class="peer accent-danger" type='radio' name='radio-1' checked='checked'/>

Radio Disabled

You can disabled radio by adding disabled attribute

Preview Html

 <input class="peer accent-danger" type='radio' name='radio-1' checked='checked' disabled/> 
<input class="peer accent-danger" type='radio' name='radio-1' checked='' disabled/>

Checkbox & Radio

Checkbox

With Label and Form-control

Checkbox With Different Colors

Checkbox With Different Size

Checkbox Disabled

Radio

Radio width Different Colors

Radio Disabled

Template Mode

Layout Type

Sidebar Type