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.

Checkbox

Design Library

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.

Color	Sizes	States
Violet	Extra Small Small Medium Large	Normal Error Disabled
Magenta	Extra Small Small Medium Large	Normal Error Disabled
Blue	Extra Small Small Medium Large	Normal Error Disabled
Teal	Extra Small Small Medium Large	Normal Error Disabled
Green	Extra Small Small Medium Large	Normal Error Disabled
Yellow	Extra Small Small Medium Large	Normal Error Disabled
Orange	Extra Small Small Medium Large	Normal Error Disabled
Red	Extra Small Small Medium Large	Normal Error Disabled
Pink	Extra Small Small Medium Large	Normal Error Disabled

<!-- 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>

Checkboxes

# Sizes

# Alignment

# Default state

# Error state

# Disabled state

# Colors

On this Page