Rating

Component status
Verified
Last releasedOctober 8, 2019
Current version@spectrum-css/rating@2.0.0

Variants#


Standard#
Verified

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

Selected#
Verified

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

Read-only#
Verified

A non-interactive rating.

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

Quiet#
Verified

<div class="spectrum-Rating spectrum-Rating--quiet">
  <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>
Show markup

Quiet (selected)#
Verified

<div class="spectrum-Rating spectrum-Rating--quiet">
  <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>
Show markup

Quiet (read-only)#
Verified

<div class="spectrum-Rating spectrum-Rating--quiet 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>
Show markup

Disabled#
Verified

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