Theme

Scale

Direction

Vars Version

Tag

Component status	Contribution
Current version	@spectrum-css/tag@9.1.2
Released	August 29, 2024
S2-foundations	@spectrum-css/tag@10.0.0-s2-foundations.12
Released	August 2, 2024

Usage notes

Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.

Variants

Standard
Contribution

Default

Tag label

Selected

Tag label

Invalid

Tag label

Disabled

Tag label

Selected + Invalid

Tag label

Emphasized

Tag label

Show markup

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

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>
    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Invalid</h4>
    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeS is-emphasized" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-emphasized" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-emphasized" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>

</div>

Sizing
Contribution

S (default)

Tag label

M

Tag label

L

Tag label

Show markup

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

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross100" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size100">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross100" />
          </svg>
        </div>
      </button>
    </div>
  </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeL spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross200" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size200">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeL spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross200" />
          </svg>
        </div>
      </button>
    </div>

  </div>
</div>

Removable
Contribution

Default

Tag label

Selected

Tag label

Invalid

Tag label

Disabled

Tag label

Selected + Invalid

Tag label

Show markup

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

    <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-Tag--removable" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-Tag--removable" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected spectrum-Tag--removable" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected spectrum-Tag--removable" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid spectrum-Tag--removable" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled spectrum-Tag--removable">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled spectrum-Tag--removable">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Invalid</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid spectrum-Tag--removable" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

  </div>
</div>

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

Pluralized classes changed to singular

spectrum-Tags-itemLabel is now spectrum-Tag-itemLabel
spectrum-Tags-itemIcon is now spectrum-Tag-itemIcon

New emphasized variant has been added

A div wrapper is required for avatar

<div class="spectrum-Avatar spectrum-Avatar--size50">
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</div>

Icon size changed to small

If you use an icon (spectrum-Tag-itemIcon) along with a tag, please replace .spectrum-Icon--sizeXS with .spectrum-Icon--sizeS.

Invalid

Docs updated to show invalid tags always including the alert icon. Invalid tags should have an icon to idenfity itself as invalid and not rely soley on the red background and border color.

Spectrum CSS

StandardContribution

Default

Selected

Invalid

Disabled

Selected + Invalid

Emphasized

SizingContribution

S (default)

M

L

RemovableContribution

Default

Selected

Invalid

Disabled

Selected + Invalid

Standard
Contribution

Sizing
Contribution

Removable
Contribution