Star rating

The star rating component allows the user to select a rating value. It is often used with forms to collect user feedback.

How are we doing? Terrible Poor Fair Good Great
HTML 
<star-rating name="rating-1">
    <span slot="legend" class="padding-right-xxs">How are we doing?</span>
    <span slot="label-1">Terrible</span>
    <span slot="label-2">Poor</span>
    <span slot="label-3">Fair</span>
    <span slot="label-4">Good</span>
    <span slot="label-5">Great</span>
</star-rating>

Apply disabled attribute to make the element non-interactive and non-focusable.

How are we doing? Terrible Poor Fair Good Great
HTML 
<star-rating name="rating-2" value="2" disabled>
    <legend slot="legend" class="padding-right-xxs">How are we doing?</legend>
    <span slot="label-1">Terrible</span>
    <span slot="label-2">Poor</span>
    <span slot="label-3">Fair</span>
    <span slot="label-4">Good</span>
    <span slot="label-5">Great</span>
</star-rating>

Figma