Rating

Component status	Contribution
Current version	@spectrum-css/rating@4.2.4
Released	March 7, 2024

View guidelines

Spectrum website

View repository

GitHub

View package

npm

Variants

Standard
Contribution

Show markup

<div class="spectrum-Rating">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" aria-label="Rating">

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>
</div>

Selected
Contribution

Show markup

<div class="spectrum-Rating">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" aria-label="Rating">

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected is-currentValue">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>
</div>

Read-only
Contribution

A non-interactive rating.

Show markup

<div class="spectrum-Rating is-readOnly">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="3" readonly aria-label="Rating">

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected is-currentValue">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>
</div>

Emphasized
Contribution

Show markup

<div class="spectrum-Rating spectrum-Rating--emphasized">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" aria-label="Rating">

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>
</div>

Emphasized (selected)
Contribution

Show markup

<div class="spectrum-Rating spectrum-Rating--emphasized">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" aria-label="Rating">

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected is-currentValue">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>
</div>

Emphasized (read-only)
Contribution

Show markup

<div class="spectrum-Rating spectrum-Rating--emphasized is-readOnly">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="3" readonly aria-label="Rating">

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected is-currentValue">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>
</div>

Disabled
Contribution

Show markup

<div class="spectrum-Rating is-disabled">
  <input class="spectrum-Rating-input" disabled type="range" min="0" max="5" value="0" aria-label="Rating">

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon is-selected is-currentValue">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-StarOutline"></use>
    </svg>
  </span>
</div>

A note on emphasized and quiet

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.

Spectrum CSS

StandardContribution

SelectedContribution

Read-onlyContribution

EmphasizedContribution

Emphasized (selected)Contribution

Emphasized (read-only)Contribution

DisabledContribution

Standard
Contribution

Selected
Contribution

Read-only
Contribution

Emphasized
Contribution

Emphasized (selected)
Contribution

Emphasized (read-only)
Contribution

Disabled
Contribution