Default rating field
<fieldset class="ecl-form-group" aria-describedby="helper-id">
<legend class="ecl-form-label">Please Rate<span class="ecl-form-label__required">*</span></legend>
<div class="ecl-help-block" id="helper-id">This is the group's helper text.</div>
<div class="ecl-rating-field"><input type="radio" id="rating-default-5" name="rating-default"
class="ecl-rating-field__input" required="" value="5" /><label class="ecl-rating-field__label"
for="rating-default-5"><span class="ecl-u-sr-only">5 stars</span><svg
class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-default-4" name="rating-default" class="ecl-rating-field__input"
required="" value="4" /><label class="ecl-rating-field__label" for="rating-default-4"><span
class="ecl-u-sr-only">4 stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-default-3" name="rating-default" class="ecl-rating-field__input"
required="" value="3" /><label class="ecl-rating-field__label" for="rating-default-3"><span
class="ecl-u-sr-only">3 stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-default-2" name="rating-default" class="ecl-rating-field__input"
required="" value="2" /><label class="ecl-rating-field__label" for="rating-default-2"><span
class="ecl-u-sr-only">2 stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-default-1" name="rating-default" class="ecl-rating-field__input"
required="" value="1" /><label class="ecl-rating-field__label" for="rating-default-1"><span
class="ecl-u-sr-only">1 star</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label></div>
</fieldset>Try it yourself on the playground
PlaygroundInvalid rating field
<fieldset class="ecl-form-group" aria-describedby="helper-id">
<legend class="ecl-form-label ecl-form-label--invalid">Please Rate<span class="ecl-form-label__required">*</span>
</legend>
<div class="ecl-help-block" id="helper-id">This is the group's helper text.</div>
<div class="ecl-feedback-message"><svg class="ecl-icon ecl-icon--m ecl-feedback-message__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#error"></use>
</svg> This is the error message</div>
<div class="ecl-rating-field"><input type="radio" id="rating-invalid-5" name="rating-invalid"
class="ecl-rating-field__input" required="" value="5" /><label class="ecl-rating-field__label"
for="rating-invalid-5"><span class="ecl-u-sr-only">5 stars</span><svg
class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-invalid-4" name="rating-invalid" class="ecl-rating-field__input"
required="" value="4" /><label class="ecl-rating-field__label" for="rating-invalid-4"><span
class="ecl-u-sr-only">4 stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-invalid-3" name="rating-invalid" class="ecl-rating-field__input"
required="" value="3" /><label class="ecl-rating-field__label" for="rating-invalid-3"><span
class="ecl-u-sr-only">3 stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-invalid-2" name="rating-invalid" class="ecl-rating-field__input"
required="" value="2" /><label class="ecl-rating-field__label" for="rating-invalid-2"><span
class="ecl-u-sr-only">2 stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-invalid-1" name="rating-invalid" class="ecl-rating-field__input"
required="" value="1" /><label class="ecl-rating-field__label" for="rating-invalid-1"><span
class="ecl-u-sr-only">1 star</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label></div>
</fieldset>Try it yourself on the playground
PlaygroundOptional rating field
<fieldset class="ecl-form-group" aria-describedby="helper-id">
<legend class="ecl-form-label">Please Rate<span class="ecl-form-label__optional"> (optional)</span></legend>
<div class="ecl-help-block" id="helper-id">This is the group's helper text.</div>
<div class="ecl-rating-field"><input type="radio" id="rating-optional-5" name="rating-optional"
class="ecl-rating-field__input" value="5" /><label class="ecl-rating-field__label" for="rating-optional-5"><span
class="ecl-u-sr-only">5 stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-optional-4" name="rating-optional" class="ecl-rating-field__input"
value="4" /><label class="ecl-rating-field__label" for="rating-optional-4"><span class="ecl-u-sr-only">4
stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-optional-3" name="rating-optional" class="ecl-rating-field__input"
value="3" /><label class="ecl-rating-field__label" for="rating-optional-3"><span class="ecl-u-sr-only">3
stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-optional-2" name="rating-optional" class="ecl-rating-field__input"
value="2" /><label class="ecl-rating-field__label" for="rating-optional-2"><span class="ecl-u-sr-only">2
stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-optional-1" name="rating-optional" class="ecl-rating-field__input"
value="1" /><label class="ecl-rating-field__label" for="rating-optional-1"><span class="ecl-u-sr-only">1
star</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label></div>
</fieldset>Try it yourself on the playground
PlaygroundRead only rating-field
<fieldset class="ecl-form-group" aria-describedby="helper-id">
<div class="ecl-rating-field ecl-rating-field--disabled"><input type="radio" id="rating-disabled-5"
name="rating-disabled" class="ecl-rating-field__input" required="" disabled="" value="5" /><label
class="ecl-rating-field__label" for="rating-disabled-5"><span class="ecl-u-sr-only">5 stars</span><svg
class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-disabled-4" name="rating-disabled" class="ecl-rating-field__input"
required="" disabled="" value="4" /><label class="ecl-rating-field__label" for="rating-disabled-4"><span
class="ecl-u-sr-only">4 stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-disabled-3" name="rating-disabled" class="ecl-rating-field__input"
required="" disabled="" value="3" checked="" /><label class="ecl-rating-field__label"
for="rating-disabled-3"><span class="ecl-u-sr-only">3 stars</span><svg
class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-disabled-2" name="rating-disabled" class="ecl-rating-field__input"
required="" disabled="" value="2" /><label class="ecl-rating-field__label" for="rating-disabled-2"><span
class="ecl-u-sr-only">2 stars</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label><input type="radio" id="rating-disabled-1" name="rating-disabled" class="ecl-rating-field__input"
required="" disabled="" value="1" /><label class="ecl-rating-field__label" for="rating-disabled-1"><span
class="ecl-u-sr-only">1 star</span><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-filled"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-filled"></use>
</svg><svg class="ecl-icon ecl-icon--m ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#star-outline"></use>
</svg></label></div>
</fieldset>Try it yourself on the playground
Playground