Checkbox

Checkboxes allow users to select one or more options from a set.

Usage

Use checkboxes for multiple selections or binary yes/no choices.

Basic Checkbox

Accept terms and conditions

<label class="df-checkbox">
  <input type="checkbox">
  <span class="df-checkbox__box"></span>
  <span class="df-checkbox__label">Accept terms and conditions</span>
</label>

Checkbox Group

Select your interestsTechnologyDesignBusiness

<span class="df-label">Select your interests</span>
<label class="df-checkbox">
  <input type="checkbox" name="interests" value="tech">
  <span class="df-checkbox__box"></span>
  <span class="df-checkbox__label">Technology</span>
</label>
<!-- more checkboxes -->

States

Checked

Checked option

Disabled

Disabled uncheckedDisabled checked

Indeterminate

Used when a parent checkbox has some but not all children selected.

Select all (partial)

// Set indeterminate state via JavaScript
checkbox.indeterminate = true;

Error State

I agree to the termsYou must accept the terms to continue

With Description

Email notificationsReceive updates about new features and announcements

<label class="df-checkbox df-checkbox--with-desc">
  <input type="checkbox">
  <span class="df-checkbox__box"></span>
  <div>
    <span class="df-checkbox__label">Email notifications</span>
    <span class="df-checkbox__desc">Receive updates about new features</span>
  </div>
</label>

Accessibility

• Always use <label> to wrap checkbox inputs
• Use aria-describedby for additional descriptions
• Ensure checkboxes are keyboard accessible
• Provide clear visual feedback for all states

Best Practices

• List options in a logical order
• Keep labels concise but descriptive
• Group related checkboxes together
• Use indeterminate state for parent checkboxes

API Reference

Classes

Class	Description
df-checkbox	Base wrapper class
df-checkbox__box	Visual checkbox element
df-checkbox__label	Label text
df-checkbox__desc	Description text
df-checkbox--error	Error state
df-checkbox--with-desc	Checkbox with description