Checkbox

Tailwind CSS and Alpine JS Checkbox

Checkboxes allow users to select one or more items from a list of options.

Default Checkbox

A checkbox with a label. This component uses an SVG icon instead of the browser's default checkbox icon. It makes the code slightly complex, but it can give you the luxury of customizing the icon and style of the checkbox.

HTML 
<label for="checkboxDefault" class="">
    <div class="">
        <input id="checkboxDefault" type="checkbox" class="" checked/>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
    <span>Notifications</span>
</label>

Checkbox with Container

A checkbox with a contrasting background and label that makes it easy to find and interact with it.

HTML 
<label for="checkboxDefault" class="">
    <span>Notifications</span>
    <div class="">
        <input id="checkboxDefault" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
</label>

Checkbox Color Variants

A checkbox with a label and description in various colors.

HTML 
<!-- primary Checkbox -->
<label for="checkboxPrimary" class="">
    <div class="">
        <input id="checkboxPrimary" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
    <span>primary</span>
</label>

<!-- secondary Checkbox -->
<label for="checkboxSecondary" class="">
    <div class="">
        <input id="checkboxSecondary" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
    <span>secondary</span>
</label>

<!-- info Checkbox -->
<label for="checkboxInfo" class="">
    <div class="">
        <input id="checkboxInfo" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
    <span>info</span>
</label>

<!-- success Checkbox -->
<label for="checkboxSuccess" class="">
    <div class="">
        <input id="checkboxSuccess" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
    <span>success</span>
</label>

<!-- warning Checkbox -->
<label for="checkboxWarning" class="">
    <div class="">
        <input id="checkboxWarning" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
    <span>warning</span>
</label>

<!-- danger Checkbox -->
<label for="checkboxDanger" class="">
    <div class="">
        <input id="checkboxDanger" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
    <span>danger</span>
</label>

Checkbox with Description

A checkbox with a label and description.

You only gonna get good news, promise.
HTML 
<div class="">
    <label for="checkboxDefault" class="">
        <div class="">
            <input id="checkboxDefault" type="checkbox" class="" aria-describedby="checkboxDescription" checked/>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
            </svg>
        </div>
        <span>Email Updates</span>
    </label>
    <span id="checkboxDescription" class="">You only gonna get good news, promise.</span>
</div>

Checkbox Group

A checkbox group with a title and multiple options.

Notifications

HTML 
<h3 class="">Notifications</h3>
<ul class="">
    <li>
        <label for="Email notificationsCheckbox" class="">
            <div class="">
                <input id="Email notificationsCheckbox" type="checkbox" class="" value="Email notifications" checked/>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                </svg>
            </div>
            <span>Email notifications</span>
        </label>
    </li>
    <li>
        <label for="Push notificationsCheckbox" class="">
            <div class="">
                <input id="Push notificationsCheckbox" type="checkbox" class="" value="Push notifications" />
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                </svg>
            </div>
            <span>Push notifications</span>
        </label>
    </li>
    <li>
        <label for="SMS alertsCheckbox" class="">
            <div class="">
                <input id="SMS alertsCheckbox" type="checkbox" class="" value="SMS alerts" checked/>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                </svg>
            </div>
            <span>SMS alerts</span>
        </label>
    </li>
</ul>

Checkbox with custom icon

Examples of checkboxes using different SVG icons. If you prefer to use a different icon, you can simply replace the SVG, but make sure that you keep the classes.

HTML 
<!-- Xmark Checkbox -->
<label for="checkboxXmark" class="">
    <div class="">
        <input id="checkboxXmark" value="" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
        </svg>
    </div>
    <span>Check Me</span>
</label>

<!-- Minus Checkbox -->
<label for="checkboxMinus" class="">
    <div class="">
        <input id="checkboxMinus" value="" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/>
        </svg>
    </div>
    <span>Check Me</span>
</label>

<!-- Plus Checkbox -->
<label for="checkboxPlus" class="">
    <div class="">
        <input id="checkboxPlus" value="" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
        </svg>
    </div>
    <span>Check Me</span>
</label>

Checkbox with animation

A checkbox with a label and description that uses a custom animation when the checkbox is checked.

HTML 
<label for="checkboxSlideUp" class="">
    <div class="">
        <input id="checkboxSlideUp" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
    <span>Check Me</span>
</label>

<label for="checkboxScaleUp" class="">
    <div class="">
        <input id="checkboxScaleUp" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
    <span>Check Me</span>
</label>

<label for="checkboxSlideDown" class="">
    <div class="">
        <input id="checkboxSlideDown" type="checkbox" class="" checked />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
    </div>
    <span>Check Me</span>
</label>

Keyboard Navigation

Key Action
Tab Next focusable element gets the focus
Space Checkbox gets checked