Logo
hummingbird

Checkbox

Checkboxes let users select one or more options from a set, making them useful for multi-choice inputs.

Class Name Type Description
form-check-input Component Checkbox
form-check-input-wrapper Component Checkbox Wrapper
form-check Component Checkbox Container
form-check-inline Component Checkbox Inline
form-check-label Component Checkbox Label
default Color Primary color (default)
form-check-secondary Color Secondary color
form-check-info Color Info color
form-check-success Color Success color
form-check-warning Color Warning color
form-check-danger Color Danger color
form-check-neutral Color Neutral color
default Size Small size (default)
form-check-md Size Medium size
form-check-lg Size Large size
btn-check Modifier Checkbox Button
Basic Checkbox

HTML

<label for="checkDefault" class="form-check-input-wrapper">
  <input class="form-check-input" type="checkbox" value="" id="checkDefault" />
</label>
<label for="checkboxChecked" class="form-check-input-wrapper">
  <input class="form-check-input" type="checkbox" value="" id="checkboxChecked" checked />
</label>
<label for="checkboxDisabled" class="form-check-input-wrapper">
  <input class="form-check-input" type="checkbox" value="" id="checkboxDisabled" disabled />
</label>
<label for="checkboxCheckedDisabled" class="form-check-input-wrapper">
  <input class="form-check-input" type="checkbox" value="" id="checkboxCheckedDisabled" checked disabled />
</label>
Checkbox with label

HTML

<div class="form-check">
  <label for="checkboxDefaultLabel" class="form-check-input-wrapper">
    <input class="form-check-input" type="checkbox" value="" id="checkboxDefaultLabel" />
  </label>
  <label for="checkboxDefaultLabel" class="form-check-label">Basic Checkbox</label>
</div>
<div class="form-check">
  <label for="checkboxCheckedLabel" class="form-check-input-wrapper">
    <input class="form-check-input" type="checkbox" value="" id="checkboxCheckedLabel" checked />
  </label>
  <label for="checkboxCheckedLabel" class="form-check-label">Checked</label>
</div>
<div class="form-check">
  <label for="checkboxDisabledLabel" class="form-check-input-wrapper">
    <input class="form-check-input" type="checkbox" value="" id="checkboxDisabledLabel" disabled />
  </label>
  <label for="checkboxDisabledLabel" class="form-check-label">Disabled</label>
</div>
Size

For medium and large checkboxes, use .form-check-md and .form-check-lg. Default is small.

HTML

<label for="checkboxSmall" class="form-check-input-wrapper">
  <input class="form-check-input" type="checkbox" value="" id="checkboxSmall" checked />
</label>
<label for="checkboxMedium" class="form-check-input-wrapper">
  <input class="form-check-input form-check-md" type="checkbox" value="" id="checkboxMedium" checked />
</label>
<label for="checkboxLarge" class="form-check-input-wrapper">
  <input class="form-check-input form-check-lg" type="checkbox" value="" id="checkboxLarge" checked />
</label>
Colors

Use color variants like .form-check-{secondary, info, success, warning, danger, neutral} to change the checkbox color. Default is primary.

HTML

<label for="checkboxPrimary" class="form-check-input-wrapper">
  <input class="form-check-input" type="checkbox" value="" id="checkboxPrimary" checked />
</label>
<label for="checkboxSecondary" class="form-check-input-wrapper">
  <input class="form-check-input form-check-secondary" type="checkbox" value="" id="checkboxSecondary" checked />
</label>
<label for="checkboxInfo" class="form-check-input-wrapper">
  <input class="form-check-input form-check-info" type="checkbox" value="" id="checkboxInfo" checked />
</label>
<label for="checkboxSuccess" class="form-check-input-wrapper">
  <input class="form-check-input form-check-success" type="checkbox" value="" id="checkboxSuccess" checked />
</label>
<label for="checkboxWarning" class="form-check-input-wrapper">
  <input class="form-check-input form-check-warning" type="checkbox" value="" id="checkboxWarning" checked />
</label>
<label for="checkboxDanger" class="form-check-input-wrapper">
  <input class="form-check-input form-check-danger" type="checkbox" value="" id="checkboxDanger" checked />
</label>
<label for="checkboxNeutral" class="form-check-input-wrapper">
  <input class="form-check-input form-check-neutral" type="checkbox" value="" id="checkboxNeutral" checked />
</label>
Inline

Create inline checkboxes by using the .form-check-inline class.

HTML

<div class="form-check-inline">
  <label for="checkboxInline" class="form-check-input-wrapper">
    <input class="form-check-input" type="checkbox" value="" id="checkboxInline" />
  </label>
  <label for="checkboxInline" class="form-check-label">Inline Checkbox</label>
</div>
<div class="form-check-inline">
  <label for="inlineChecked" class="form-check-input-wrapper">
    <input class="form-check-input" type="checkbox" value="" id="inlineChecked" checked />
  </label>
  <label for="inlineChecked" class="form-check-label">Checked</label>
</div>
<div class="form-check-inline">
  <label for="inlineDisabled" class="form-check-input-wrapper">
    <input class="form-check-input" type="checkbox" value="" id="inlineDisabled" disabled />
  </label>
  <label for="inlineDisabled" class="form-check-label">Disabled</label>
</div>
Checkbox toggle buttons

Create button-like checkboxes by using .btn styles rather than .form-check-label on the <label> elements.

HTML

<input class="btn-check" type="checkbox" value="" id="checkboxBtnDefault" />
<label for="checkboxBtnDefault" class="btn btn-primary">Default</label>

<input class="btn-check" type="checkbox" value="" id="checkboxBtnChecked" checked />
<label for="checkboxBtnChecked" class="btn btn-primary">Checked</label>

<input class="btn-check" type="checkbox" value="" id="checkboxBtnDisabled" disabled />
<label for="checkboxBtnDisabled" class="btn btn-primary">Disabled</label>
CSS variables

The checkbox and radio component is built using a set of CSS variables. These variables provide flexibility for customizing styles.

.form-check-input {
  --form-check-input-bg: var(--background-color-default);
  --form-check-input-checked-bg: var(--color-primary);
  --form-check-input-with: --spacing(4);
  --form-check-input-height: --spacing(4);
  --form-check-input-border-width: 1px;
  --form-check-input-border-color: var(--border-color-base);
  --form-check-input-radius: var(--radius-sm);
  --form-check-bg-image: none;
}

.form-check-input-wrapper {
  --form-check-input-wrapper-bg: --alpha(var(--color-primary) / 12%);
}