Checkbox

Component status
Verified
Last releasedOctober 8, 2019
Current version@spectrum-css/checkbox@2.0.0

Usage notes#


Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.

Variants#


Standard#
Verified


<label class="spectrum-Checkbox">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<br>
<label class="spectrum-Checkbox">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox with an extraordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the checkbox which has an unacceptably long label</span>
</label>
Show markup

Quiet#
Verified


<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<br>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox with an extraordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the checkbox which has an unacceptably long label</span>
</label>
Show markup

Disabled#
Verified

<label class="spectrum-Checkbox is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" disabled checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-disabled is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-5" disabled>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
Show markup

Error#
Verified

<label class="spectrum-Checkbox is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-invalid is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
Show markup