Checkboxes

Inline Checkbox Lists

Useful when you want to group a series of checkboxes together on a single line.

<ul class="input-list">
  <li class="input-item-inline">
    <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox" checked />
    <label for="checkbox-id" class="input-label">Checkbox Label</label>
  </li>
</ul>

Stacked Checkbox Lists

Useful when you want to group a series of checkboxes together in a list (stacked by default).

<ul class="input-list">
  <li class="input-item">
    <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox" checked />
    <label for="checkbox-id" class="input-label">Checkbox Label</label>
  </li>
</ul>

Inverse Checkbox Lists

Useful when the checkboxes are displayed on a dark background.

<ul class="input-list">
  <li class="input-item">
    <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox input-checkbox-inverse" checked />
    <label for="checkbox-id" class="input-label-inverse">Checkbox Inverse Label</label>
  </li>
</ul>

Caution Checkbox Lists

Useful when you want to the user to proceed with caution about the choices they’re making.

<ul class="input-list">
  <li class="input-item">
    <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox input-checkbox-caution" checked />
    <label for="checkbox-id" class="input-label">Checkbox Label</label>
  </li>
</ul>

Checkboxes Nested in Buttons

<!-- Secondary button with a checkbox in the unchecked state. -->
<button class="btn btn-secondary">
  <input type="checkbox" class="input input-checkbox mr-5" />
  Button Text
</button>

<!-- CTA button with a checkbox in the checked state. -->
<button class="btn btn-cta">
  <input type="checkbox" class="input input-checkbox input-checkbox-inverse mr-5" checked />
  Button Text
</button>

Checkbox-Switches

Switches are useful when the user has a choice to toggle on and off. Note: For the best UX, please make sure that the switch saves immediately each time it changes state.

Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.
Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.
<input type="checkbox" class="input input-switch" />

Secondary Checkbox-Switches

Useful when you don’t need to draw attention to the bright-red, off state.

Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.
Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.
<input type="checkbox" class="input input-switch-secondary" />

Warning Checkbox-Switches

Useful to communicate that your object is only partially connected, and it needs additional attention.

Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.
Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.
<input type="checkbox" class="input input-switch-secondary input-switch-warning" />

Checkbox-Switch Sizes .{ screen }-input-switch-{ sm..xl }

Each size can be used or altered at any breakpoint.

<!-- Input-Switch: Small -->
<input type="checkbox" class="input input-switch input-switch-sm" />

<!-- Input-Switch: Medium (Default) -->
<input type="checkbox" class="input input-switch" />

<!-- Input-Switch: Large -->
<input type="checkbox" class="input input-switch input-switch-lg" />

<!-- Input-Switch: X-Large -->
<input type="checkbox" class="input input-switch input-switch-xl" />