Checkboxes

Use checkboxes when you have a list of options and the user can select multiple options.


Elements CSS doesn’t include pre-designed components out of the box, but they’re easy to build using existing utilities.

Checkboxes should be consistent across all Q-CTRL’s products as such they should follow the guidelines in Elements Design Library. The follow examples show you how to acheive this using Elements CSS utility classes.

# Sizes

Checkboxes come in four different sizes by using w-*, 'h-* and bg-* classes.

<form class="flex items-center justify-center gap-x-6">
<!-- Extra Small -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-2xs">Extra Small</span>
<input class="order-1 w-4 h-4 rounded-xs bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-3 checked:bg-white checked:bg-check-primary checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-primary focus:checked:border focus:checked:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer" checked>
</label>
<!-- Small -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-xs">Small</span>
<input class="order-1 w-5 h-5 rounded-xs bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-5 checked:bg-white checked:bg-check-primary checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-primary focus:checked:border focus:checked:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Medium -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Medium</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-primary checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-primary focus:checked:border focus:checked:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Large -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-lg">Large</span>
<input class="order-1 w-8 h-8 rounded bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-8 checked:bg-white checked:bg-check-primary checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-primary focus:checked:border focus:checked:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
</form>

# Alignment

Align the checkbox to the left or right of the lable by using order-* classes, check out the Order documentation.

<form class="flex items-center justify-center gap-x-6">
<!-- Aligned Left -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-primary checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-primary focus:checked:border focus:checked:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer" checked>
</label>
<!-- Aligned Right -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-primary checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-primary focus:checked:border focus:checked:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
</form>

# Default state

<form class="flex items-center justify-center gap-x-6">
<!-- Default Normal -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-primary checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-primary focus:checked:border focus:checked:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Default Checked -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-primary checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-primary focus:checked:border focus:checked:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer" checked>
</label>
</form>

# Error state

When a form is invalid set the error state by modifying the utility classes.

The error state should override all checkbox colors and only be applied when the form is invalid.

<form class="flex items-center justify-center gap-x-6">
<!-- Error Normal -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-danger hover:bg-red-0 hover:border-danger-dark hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-danger checked:border checked:border-danger checked:shadow-inner-sm hover:checked:border hover:checked:border-danger-dark hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-danger focus:checked:border focus:checked:border-danger focus:ring focus:ring-offset-0 focus:ring-danger focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Error Checked -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-danger hover:bg-red-0 hover:border-danger-dark hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-danger checked:border checked:border-danger checked:shadow-inner-sm hover:checked:border hover:checked:border-danger-dark hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-danger focus:checked:border focus:checked:border-danger focus:ring focus:ring-offset-0 focus:ring-danger focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer" checked>
</label>
</form>

# Disabled state

Make checkboxes look inactive by adding the disabled boolean attribute to the <input> element.

<form class="flex items-center justify-center gap-x-6">
<!-- Disabled Normal -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-primary checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-primary focus:checked:border focus:checked:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer" disabled>
</label>
<!-- Disabled Checked -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-primary checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-primary focus:checked:border focus:checked:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer" checked disabled>
</label>
</form>

# Colors

Checkboxes are also available in the base colors.

ColorSizesStates

Violet

Magenta

Blue

Teal

Green

Yellow

Orange

Red

Pink

<!-- Violet -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-violet checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-violet focus:checked:border focus:checked:border-violet focus:ring focus:ring-offset-0 focus:ring-violet focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Magenta -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-magenta checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-magenta focus:checked:border focus:checked:border-magenta focus:ring focus:ring-offset-0 focus:ring-magenta focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Blue -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-blue checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-blue focus:checked:border focus:checked:border-blue focus:ring focus:ring-offset-0 focus:ring-blue focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Teal -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-teal checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-teal focus:checked:border focus:checked:border-teal focus:ring focus:ring-offset-0 focus:ring-teal focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Green -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-green checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-green focus:checked:border focus:checked:border-green focus:ring focus:ring-offset-0 focus:ring-green focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Yellow -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-yellow checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-yellow focus:checked:border focus:checked:border-yellow focus:ring focus:ring-offset-0 focus:ring-yellow focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Orange -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-orange checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-orange focus:checked:border focus:checked:border-orange focus:ring focus:ring-offset-0 focus:ring-orange focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Red -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-red checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-red focus:checked:border focus:checked:border-red focus:ring focus:ring-offset-0 focus:ring-red focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>
<!-- Pink -->
<label class="flex items-center gap-x-1.5">
<span class="order-0 text-base">Label</span>
<input class="order-1 w-6 h-6 rounded-sm bg-white border-gray-300 hover:bg-gray-0 hover:border-gray-400 hover:shadow-xs checked:bg-6 checked:bg-white checked:bg-check-pink checked:border checked:border-gray-300 checked:shadow-inner-sm hover:checked:border hover:checked:border-gray-400 hover:checked:bg-white hover:checked:text-gray-100 focus:checked:shadow-none focus:checked:bg-white focus:checked:bg-check-pink focus:checked:border focus:checked:border-pink focus:ring focus:ring-offset-0 focus:ring-pink focus:ring-opacity-25 disabled:shadow-none disabled:bg-light disabled:border-gray-200 disabled:cursor-not-allowed disabled:checked:shadow-none disabled:checked:bg-light disabled:checked:bg-check-gray disabled:checked:border-gray" type="checkbox" name="answer">
</label>