Skip to content

role checkbox

Checkbox draft v0.1.0

Lets people turn one option on or off, or pick any number of options from a list.

A checkbox is a binary choice with a visible label: checked or unchecked, and a third, partially checked look when it stands for a group whose members disagree. Several checkboxes side by side let people pick any number of options; one checkbox alone confirms a statement (accepting terms, remembering a session). A setting that takes effect immediately is a Switch; a choice of exactly one option is a Radio group.

Playground

HTML
<div class="ds-checkbox" data-size="medium">
  <input
    type="checkbox"
    class="ds-checkbox__control"
    data-part="control"
    id="ds-checkbox-22"
  >
  <label
    class="ds-checkbox__label"
    data-part="label"
    for="ds-checkbox-22"
  >Send me a weekly summary</label>
</div>