Checkbox

Component status	Contribution
Current version	@spectrum-css/checkbox@9.1.3
Released	September 13, 2024
S2-foundations	@spectrum-css/checkbox@10.0.0-s2-foundations.16
Released	September 12, 2024

View guidelines

Spectrum website

View repository

GitHub

View package

npm

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.
Invalid checkboxes are indicated with an alert HelpText when included in a Fieldgroup.

Variants

Standard
Contribution

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--sizeM">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </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--sizeM is-invalid">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-invalid">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM 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-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </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--sizeM is-disabled">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM 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-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM 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-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </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">Read-only</h4>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-disabled is-readOnly">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-disabled is-readOnly">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" disabled checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-disabled is-indeterminate is-readOnly">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-5" disabled>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>
  </div>
</div>

Emphasized
Contribution

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--sizeM spectrum-Checkbox--emphasized">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </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--sizeM 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-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-invalid">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized 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-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </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--sizeM spectrum-Checkbox--emphasized is-disabled">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized 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-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized 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-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </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">Read-only</h4>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-disabled is-readOnly">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-disabled is-readOnly">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" disabled checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-disabled is-indeterminate is-readOnly">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-5" disabled>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>
  </div>
</div>

T-Shirt Sizes
Contribution

Show markup

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

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeS">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark50 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark50" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash50 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash50" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br/>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeS">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark50 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark50" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash50 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash50" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br />

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeS is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark50 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark50" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash50 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash50" />
        </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">M (default)</h4>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark75" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash75" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br/>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark75" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash75" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br/>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark75" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash75" />
        </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">L</h4>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeL">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br/>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeL">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br />

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeL is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </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">XL</h4>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeXL">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark200 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark200" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash200 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash200" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br/>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeXL">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark200 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark200" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash200 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash200" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

    <br/>

    <label class="spectrum-Checkbox spectrum-Checkbox--sizeXL is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark200 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark200" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash200 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash200" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">Checkbox</span>
    </label>

  </div>
</div>

Wrapping behavior
Contribution

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

Show markup

<label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Checkmark100" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Dash100" />
    </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>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

Quiet and emphasized

Spectrum has chosen the variant previously known as quiet to be the default and has added an emphasized variant with the same styles as the previous default.
If you were using the quiet variant, the .spectrum-Checkbox--quiet class is no longer required and can be removed.
If you need a switch to look like it did before this change, add .spectrum-Checkbox--emphasized.

T-shirt sizing

Checkbox now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Checkbox--size* class.
Using the classes .spectrum-Checkbox .spectrum-Checkbox--sizeM will get result in the previous default checkbox size.

Spectrum CSS

StandardContribution

Default

Invalid

Disabled

Read-only

EmphasizedContribution

Default

Invalid

Disabled

Read-only

T-Shirt SizesContribution

S

M (default)

L

XL

Wrapping behaviorContribution

Standard
Contribution

Emphasized
Contribution

T-Shirt Sizes
Contribution

Wrapping behavior
Contribution