Check and radio

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

Checkbox

                
                  <label class="flex items-center">
                    <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-blue-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded focus:outline-none">
                    <span class="ltr:ml-2 rtl:mr-2 text-gray-700">Checkbox</span>
                  </label>

Radio

                
                  <div class="flex flex-nowrap flex-row items-center mb-4">
                    <input class="form-checkbox h-5 w-5 text-indigo-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-full focus:outline-none" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                    <label class="inline-block ltr:ml-2 rtl:mr-2" for="flexRadioDefault1">
                      Default radio
                    </label>
                  </div>
                  <div class="flex flex-nowrap flex-row items-center mb-4">
                    <input class="form-checkbox h-5 w-5 text-indigo-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-full focus:outline-none" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
                    <label class="inline-block ltr:ml-2 rtl:mr-2" for="flexRadioDefault2">
                      Default checked radio
                    </label>
                  </div>

Switch checkbox

                
                  <div x-data="{ open: false }">
                    <label class="flex items-center cursor-pointer justify-center mb-5">
                      <span>Monthly</span>
                      <input type="checkbox" id="js-checkbox" class="hidden">
                      <i @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()" class="relative inline-block w-24 h-7 border border-gray-200 dark:border-gray-700 rounded-xl transition mx-4">
                        <span :class="{ 'hidden': open, 'block': !(open) }" x-description="off" x-state:on="on" x-state:off="off" class="absolute ltr:left-0 rtl:right-0 w-10 h-6 rounded-xl bg-blue-700" ></span>
                        <span :class="{ 'block': open, 'hidden': !(open) }" x-description="on" x-state:on="on" x-state:off="off" class="absolute ltr:right-0 rtl:left-0 w-10 h-6 rounded-xl bg-blue-700"></span>
                      </i>
                      <span>Yearly</span>
                    </label>
                  </div>