Playground

Checkbox

A checkbox element that can be used to select one or more options.

Tailwind Only
Copied! 
<div class="flex items-center mb-4">
    <input id="checkbox-id" type="checkbox" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-neutral-900 focus:ring-neutral-900">
    <label for="checkbox-id" class="ml-2 text-sm font-medium text-gray-900">Checkbox</label>
</div>

Data

Below you will find the data properties available in the x-data attribute of this element.

This particular element does not contain any data, It holds within it only TailwindCSS classes. Ah, but fear not! Should you so desire, you have the power to infuse it with some dynamic magic. Simply add the `x-data` attribute and create your desired functionality.

More Examples

Below you will find more Checkbox examples you may wish to use in your projects.

Copied! 
<div class="flex items-start mb-6">
    <div class="flex items-center h-5">
        <input name="remember" id="remember" type="checkbox" class="w-4 h-4 rounded border-neutral-300 bg-neutral-50 focus:ring-3 focus:ring-blue-300" required>
    </div>
    <div class="ml-3 text-sm">
        <label for="remember" class="text-neutral-900">Remember Me</label>
    </div>
</div>
Copied!

Select a library below

<div class="space-y-4">
    <p class="text-sm font-medium text-center text-neutral-500">Select a library below</p>
    <div class="relative">
        <input type="checkbox" id="alpine-checkbox" value="" class="hidden peer" required="">
        <label for="alpine-checkbox" class="inline-flex items-center justify-between w-full p-5 bg-white border-2 rounded-lg cursor-pointer group border-neutral-200/70 text-neutral-600 peer-checked:border-blue-600 peer-checked:text-neutral-900 peer-checked:bg-blue-50/50 hover:text-neutral-900">
            <div class="flex items-center space-x-5">
                <svg class="w-16 h-auto" viewBox="0 0 200 92" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M155.556 0 200 44.25l-44.444 44.249-44.445-44.25L155.556 0Z" fill="currentColor" class="text-[#77C1D2]"></path><path fill-rule="evenodd" clip-rule="evenodd" d="m44.444 0 92.139 91.735H47.694L0 44.249 44.444 0Z" fill="currentColor" class="text-[#2D3441]"></path></svg>
                <div class="flex flex-col justify-start">
                    <div class="w-full text-lg font-semibold">AlpineJS</div>
                    <div class="w-full text-sm opacity-60">Your new, lightweight, JavaScript framework.</div>
                </div>
            </div>
        </label>
    </div>
    <div class="relative">
        <input type="checkbox" id="tailwind-checkbox" value="" class="hidden peer" required="">
        <label for="tailwind-checkbox" class="inline-flex items-center justify-between w-full p-5 bg-white border-2 rounded-lg cursor-pointer group border-neutral-200/70 text-neutral-600 peer-checked:border-blue-600 peer-checked:text-neutral-900 peer-checked:bg-blue-50/50 hover:text-neutral-900">
            <div class="flex items-center space-x-5">
                <svg class="w-16 h-auto text-[#38BDF8]" viewBox="0 0 200 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M100 0C73.333 0 56.667 13.333 50 40c10-13.333 21.667-18.333 35-15 7.607 1.9 13.044 7.422 19.063 13.53C113.867 48.48 125.215 60 150 60c26.667 0 43.333-13.333 50-40-10 13.333-21.667 18.333-35 15-7.607-1.9-13.044-7.422-19.063-13.53C136.133 11.52 124.785 0 100 0ZM50 60C23.333 60 6.667 73.333 0 100c10-13.333 21.667-18.333 35-15 7.607 1.904 13.044 7.422 19.063 13.53C63.867 108.48 75.215 120 100 120c26.667 0 43.333-13.333 50-40-10 13.333-21.667 18.333-35 15-7.607-1.9-13.044-7.422-19.063-13.53C86.133 71.52 74.785 60 50 60Z" fill="currentColor" class=""></path></svg>
                <div class="flex flex-col justify-start">
                    <div class="w-full text-lg font-semibold">Tailwind CSS</div>
                    <div class="w-full text-sm opacity-60">The ultimate utility-first CSS framework</div>
                </div>
            </div>
        </label>
    </div>
</div>
Copied! 
<div class="flex items-start mb-6">
    <div class="flex items-center h-5">
        <input name="custom-checkbox" id="custom-checkbox" type="checkbox" class="hidden peer" required>
        <label for="custom-checkbox" class="peer-checked:[&_svg]:scale-100 text-sm font-medium text-neutral-600 peer-checked:text-blue-600 [&_svg]:scale-0 peer-checked:[&_.custom-checkbox]:border-blue-500 peer-checked:[&_.custom-checkbox]:bg-blue-500 select-none flex items-center space-x-2">
            <span class="flex items-center justify-center w-5 h-5 border-2 rounded custom-checkbox text-neutral-900">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-3 h-3 text-white duration-300 ease-out">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>
            </span>
            <span>Custom Checkbox</span>
        </label>
    </div>
</div>
Card Command
A project by DevDojo