COMPONENTS

Star ratings

One rating class supports an accessible read-only display or native radio choices that submit ordinary form values.

Usage

Markup: fieldset.rating > legend, label > input[type=radio], span; labelled .rating display

Behaviour: Integer star selection without JavaScript; backend supplies averages and submissions.

Read-only ratings need an explicit accessible label and visible numeric value. The application supplies both the stars and their matching value; CSS calculates no average.
For selection, put class="rating" on a fieldset with a legend. Each label contains a named native radio, a decorative SVG star with aria-hidden=true, and text such as "3 stars". Arrow keys, disabled and required states, form submission and reset remain native.
This pattern uses integer ratings from one to five. Choices begin unset unless the server marks one checked. Use a normal reset button to clear an initially unset group.
Filled stars identify every value up to the checked choice. Focus is visible on the corresponding star. No new data attributes or JavaScript.

Component API and styling module · Inherited appearance settings

A published rating

Text communicates the value without relying on colour or star glyphs.

★★★★☆ 4 out of 5 · 12 reviews

<p><span class="rating" role="img" aria-label="4 out of 5 stars">★★★★☆</span> <span>4 out of 5 · 12 reviews</span></p>

Choose a rating

Native radio values remain available to a normal form action. No review is submitted by this example.

<form><fieldset class="rating"><legend>Your rating</legend>
<label><input type="radio" name="product-rating" value="1"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>1 star</span></label>
<label><input type="radio" name="product-rating" value="2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>2 stars</span></label>
<label><input type="radio" name="product-rating" value="3"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>3 stars</span></label>
<label><input type="radio" name="product-rating" value="4"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>4 stars</span></label>
<label><input type="radio" name="product-rating" value="5"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>5 stars</span></label>
</fieldset><button type="reset" class="outline">Clear rating</button></form>

Unavailable selection

Disabled native choices preserve their state and cannot be changed.

<fieldset class="rating" disabled><legend>Published review (editing unavailable)</legend>
<label><input type="radio" name="locked-rating" value="1"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>1 star</span></label>
<label><input type="radio" name="locked-rating" value="2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>2 stars</span></label>
<label><input type="radio" name="locked-rating" value="3"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>3 stars</span></label>
<label><input type="radio" name="locked-rating" value="4" checked><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>4 stars</span></label>
<label><input type="radio" name="locked-rating" value="5"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z"/></svg><span>5 stars</span></label>
</fieldset>