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

Rating

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

Variants


Standard
Verified

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-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

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

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

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

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

Selected
Verified

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-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

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

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

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

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

Read-only
Verified

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-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

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

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

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

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

Emphasized
Verified

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-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

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

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

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

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

Emphasized (selected)
Verified

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-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

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

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

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

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

Emphasized (read-only)
Verified

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-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

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

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

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

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

Disabled
Verified

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-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline"></use>
    </svg>
  </span>

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

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

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

  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-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.