• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Checkbox

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/checkbox@3.0.0-beta.5

Usage notes


Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.
Checkboxes should not be used on their own, they should always be used within a FieldGroup.

Variants


Standard
Verified

Default



Invalid



Disabled



Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>

    <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>

    <br>

    <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>

    <br>

    <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>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
    <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>

    <br>

    <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>

    <br>

    <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>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>

    <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>

    <br>

    <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>

    <br>

    <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>
  </div>
</div>

Quiet
Verified

Default



Invalid



Disabled



Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>

    <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>

    <br>

    <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>

    <br>

    <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>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
    <label class="spectrum-Checkbox spectrum-Checkbox--quiet 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>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--quiet 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>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--quiet 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>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>

    <label class="spectrum-Checkbox spectrum-Checkbox--quiet 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>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--quiet 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>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--quiet 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>
  </div>
</div>

Wrapping behavior
Verified

Show markup
<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 wrap text when it gets longer than the container which contains the checkbox which has an unacceptably long label</span>
</label>