Skip to main content Skip to docs navigation

Checkbox

Highly customizable, native checkbox <input> elements for presenting toggleable options.

GitHub Edit on GitHub

Basic checkbox

All checkbox styling is contained to a wrapper class, .check. This does the following:

  • Adds a stacking grid layout for the checkbox and custom SVG icon.
  • Overrides the default <input> appearance with themed colors.
  • Handles the toggling of separate paths in our custom SVG for the :checked and indeterminate states. Two <path>s are included in the SVG, one for each state, and the appropriate <path> is shown based on the <input>’s state.

For folks looking to replace our provided icons, you'll need to add the .checked and .indeterminate classes to the <path>s and use them in a single <svg> element.

Checkbox layout and labels are handled with additional HTML and CSS.

HTML
<div class="check">
  <input type="checkbox" id="check" checked />
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
    <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
    <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
  </svg>
</div>

Indeterminate

Checkboxes can utilize the indeterminate pseudo class when manually set via JavaScript. There is no available HTML attribute for specifying it.

HTML
<div class="check">
  <input type="checkbox" id="checkIndeterminate" />
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
    <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
    <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
  </svg>
</div>

Label

Wrap the .check in a .checkgroup layout wrapper and add your label. This sets some basic flexbox styling.

Consider margin utilities for additional spacing, and flex utilities for alignment.

HTML
<div class="checkgroup">
  <div class="check">
    <input type="checkbox" id="checkLabel" />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checkLabel">Example new checkbox</label>
</div>

Theme colors

Modify the appearance of checked checkboxes by adding the .theme-{color} class to the .check element. This will set the checked background and border color to the theme color.

HTML
<div class="checkgroup">
  <div class="check theme-primary">
    <input type="checkbox" id="checkprimary" checked />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checkprimary">Example primary checkbox</label>
</div>
<div class="checkgroup">
  <div class="check theme-accent">
    <input type="checkbox" id="checkaccent" checked />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checkaccent">Example accent checkbox</label>
</div>
<div class="checkgroup">
  <div class="check theme-success">
    <input type="checkbox" id="checksuccess" checked />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checksuccess">Example success checkbox</label>
</div>
<div class="checkgroup">
  <div class="check theme-danger">
    <input type="checkbox" id="checkdanger" checked />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checkdanger">Example danger checkbox</label>
</div>
<div class="checkgroup">
  <div class="check theme-warning">
    <input type="checkbox" id="checkwarning" checked />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checkwarning">Example warning checkbox</label>
</div>
<div class="checkgroup">
  <div class="check theme-info">
    <input type="checkbox" id="checkinfo" checked />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checkinfo">Example info checkbox</label>
</div>
<div class="checkgroup">
  <div class="check theme-inverse">
    <input type="checkbox" id="checkinverse" checked />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checkinverse">Example inverse checkbox</label>
</div>
<div class="checkgroup">
  <div class="check theme-secondary">
    <input type="checkbox" id="checksecondary" checked />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checksecondary">Example secondary checkbox</label>
</div>

Description

With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, <b-vstack>, to stack the label and description.

Supporting description for the above label.
HTML
<div class="checkgroup">
  <div class="check">
    <input type="checkbox" id="checkDescription" />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <b-vstack>
    <label for="checkDescription">Example new checkbox</label>
    <small class="description">Supporting description for the above label.</small>
  </b-vstack>
</div>

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

HTML
<div class="checkgroup">
  <div class="check">
    <input type="checkbox" id="checkDisabled" disabled />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checkDisabled">Example new checkbox</label>
</div>

Applies to checked states, too.

HTML
<div class="checkgroup">
  <div class="check">
    <input type="checkbox" id="checkDisabledChecked" checked disabled />
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
    </svg>
  </div>
  <label for="checkDisabledChecked">Example new checkbox</label>
</div>

Sizes

Add .check-sm or .check-lg to make your checkbox appear smaller or larger.

HTML
<div class="check check-sm">
  <input type="checkbox" id="checkSizeSm" checked />
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
    <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
    <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
  </svg>
</div>
<div class="check">
  <input type="checkbox" id="checkSizeMd" checked />
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
    <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
    <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
  </svg>
</div>
<div class="check check-lg">
  <input type="checkbox" id="checkSizeLg" checked />
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
    <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
    <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
  </svg>
</div>

CSS

Variables

CSS variables for the checkbox component are built on the Sass variables.

SCSS
// stylelint-disable-next-line scss/dollar-variable-default
$check-tokens: defaults(
  (
    --check-size: 1.25rem,
    --check-margin-block: .125rem,
    --check-bg: transparent,
    --check-border-color: var(--border-color),
    --check-border-radius: .375rem,
    --check-checked-bg: var(--control-checked-bg),
    --check-checked-border-color: var(--control-checked-border-color),
    --check-indeterminate-bg: var(--control-checked-bg),
    --check-indeterminate-border-color: var(--control-checked-border-color),
    --check-active-bg: var(--control-active-bg),
    --check-active-border-color: var(--control-active-border-color),
    --check-disabled-bg: var(--control-disabled-bg),
    --check-disabled-opacity: var(--control-disabled-opacity),
  ),
  $check-tokens
);