- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Rating
Component status | Contribution |
---|---|
Last released | September 26, 2023 |
Current version | @spectrum-css/rating@4.0.29 |
Variants
StandardVerified
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>
SelectedVerified
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-onlyVerified
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>
EmphasizedVerified
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)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-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)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-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>
DisabledVerified
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.