Symbol rating
Ordinal rating presented with symbols while retaining accessible textual labels.
Canonical sourcepatterns/symbol-rating.html
Behavior ownerNative HTML
Runtime inside FormaNone
Example 1
Canonical
Canonical repository markup, namespaced only to keep examples independent.
View HTML
<fieldset class="ef-symbol-rating">
<legend class="ef-symbol-rating__legend">How satisfied are you with the release process?</legend>
<div class="ef-symbol-rating__options">
<label class="ef-symbol-rating__option">
<input type="radio" name="ex1-symbol-rating-release-satisfaction" value="1" required>
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">1 of 5, very dissatisfied</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex1-symbol-rating-release-satisfaction" value="2">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">2 of 5, dissatisfied</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex1-symbol-rating-release-satisfaction" value="3">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">3 of 5, neutral</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex1-symbol-rating-release-satisfaction" value="4">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">4 of 5, satisfied</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex1-symbol-rating-release-satisfaction" value="5">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">5 of 5, very satisfied</span>
</label>
</div>
</fieldset>Example 2
Representative state
A browser-native state made visible without adding a runtime.
View HTML
<fieldset class="ef-symbol-rating">
<legend class="ef-symbol-rating__legend">How satisfied are you with the release process?</legend>
<div class="ef-symbol-rating__options">
<label class="ef-symbol-rating__option">
<input type="radio" name="ex2-symbol-rating-release-satisfaction" value="1" required checked>
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">1 of 5, very dissatisfied</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex2-symbol-rating-release-satisfaction" value="2">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">2 of 5, dissatisfied</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex2-symbol-rating-release-satisfaction" value="3">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">3 of 5, neutral</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex2-symbol-rating-release-satisfaction" value="4">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">4 of 5, satisfied</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex2-symbol-rating-release-satisfaction" value="5">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">5 of 5, very satisfied</span>
</label>
</div>
</fieldset>Example 3
Constrained layout
The canonical contract inside a narrow application region.
View HTML
<fieldset class="ef-symbol-rating">
<legend class="ef-symbol-rating__legend">How satisfied are you with the release process?</legend>
<div class="ef-symbol-rating__options">
<label class="ef-symbol-rating__option">
<input type="radio" name="ex3-symbol-rating-release-satisfaction" value="1" required>
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">1 of 5, very dissatisfied</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex3-symbol-rating-release-satisfaction" value="2">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">2 of 5, dissatisfied</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex3-symbol-rating-release-satisfaction" value="3">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">3 of 5, neutral</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex3-symbol-rating-release-satisfaction" value="4">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">4 of 5, satisfied</span>
</label>
<label class="ef-symbol-rating__option">
<input type="radio" name="ex3-symbol-rating-release-satisfaction" value="5">
<span class="ef-symbol-rating__symbol" aria-hidden="true">★</span>
<span class="ef-sr-only">5 of 5, very satisfied</span>
</label>
</div>
</fieldset>