Rating field - Forms

Default rating field

<fieldset class="ecl-form-group" aria-describedby="rating-field-helper">
  <legend id="rating-field-label" class="ecl-form-label">Please Rate<span class="ecl-form-label__required" role="note"
      aria-label="required">*</span></legend>
  <div class="ecl-help-block" id="rating-field-helper">This is the group's helper text.</div>
  <div class="ecl-rating-field"><input id="rating-field-5" name="rating-group" class="ecl-rating-field__input"
      type="radio" value="5" required /><label class="ecl-rating-field__label" for="rating-field-5"><span
        class="ecl-u-sr-only">5 stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled"
        focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-4" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="4" required /><label class="ecl-rating-field__label" for="rating-field-4"><span class="ecl-u-sr-only">4
        stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-3" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="3" required /><label class="ecl-rating-field__label" for="rating-field-3"><span class="ecl-u-sr-only">3
        stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-2" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="2" required /><label class="ecl-rating-field__label" for="rating-field-2"><span class="ecl-u-sr-only">2
        stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-1" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="1" required /><label class="ecl-rating-field__label" for="rating-field-1"><span class="ecl-u-sr-only">1
        star</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label></div>
</fieldset>

Try it yourself on the playground

Playground

Invalid rating field

<fieldset class="ecl-form-group" aria-describedby="rating-field-helper rating-field-invalid" aria-invalid="true">
  <legend id="rating-field-label" class="ecl-form-label ecl-form-label--invalid">Please Rate<span
      class="ecl-form-label__required" role="note" aria-label="required">*</span></legend>
  <div class="ecl-help-block" id="rating-field-helper">This is the group's helper text.</div>
  <div class="ecl-rating-field"><input id="rating-field-5" name="rating-group" class="ecl-rating-field__input"
      type="radio" value="5" required /><label class="ecl-rating-field__label" for="rating-field-5"><span
        class="ecl-u-sr-only">5 stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled"
        focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-4" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="4" required /><label class="ecl-rating-field__label" for="rating-field-4"><span class="ecl-u-sr-only">4
        stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-3" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="3" required /><label class="ecl-rating-field__label" for="rating-field-3"><span class="ecl-u-sr-only">3
        stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-2" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="2" required /><label class="ecl-rating-field__label" for="rating-field-2"><span class="ecl-u-sr-only">2
        stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-1" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="1" required /><label class="ecl-rating-field__label" for="rating-field-1"><span class="ecl-u-sr-only">1
        star</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label></div>
  <div class="ecl-feedback-message" id="rating-field-invalid"><svg
      class="ecl-icon ecl-icon--m ecl-feedback-message__icon" focusable="false" aria-hidden="true">
      <use xlink:href="/dist/media/icons.aa842b0d.svg#error"></use>
    </svg>This is the error message</div>
</fieldset>

Try it yourself on the playground

Playground

Optional rating field

<fieldset class="ecl-form-group" aria-describedby="rating-field-helper">
  <legend id="rating-field-label" class="ecl-form-label">Please Rate<span class="ecl-form-label__optional" role="note"
      aria-label="optional">(optional)</span></legend>
  <div class="ecl-help-block" id="rating-field-helper">This is the group's helper text.</div>
  <div class="ecl-rating-field"><input id="rating-field-5" name="rating-group" class="ecl-rating-field__input"
      type="radio" value="5" required /><label class="ecl-rating-field__label" for="rating-field-5"><span
        class="ecl-u-sr-only">5 stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled"
        focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-4" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="4" required /><label class="ecl-rating-field__label" for="rating-field-4"><span class="ecl-u-sr-only">4
        stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-3" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="3" required /><label class="ecl-rating-field__label" for="rating-field-3"><span class="ecl-u-sr-only">3
        stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-2" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="2" required /><label class="ecl-rating-field__label" for="rating-field-2"><span class="ecl-u-sr-only">2
        stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false"
        aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-1" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="1" required /><label class="ecl-rating-field__label" for="rating-field-1"><span class="ecl-u-sr-only">1
        star</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label></div>
</fieldset>

Try it yourself on the playground

Playground

Read only rating-field

<fieldset class="ecl-form-group">
  <div class="ecl-rating-field ecl-rating-field--disabled"><input id="rating-field-5" name="rating-group"
      class="ecl-rating-field__input" type="radio" value="5" required disabled /><label class="ecl-rating-field__label"
      for="rating-field-5"><span class="ecl-u-sr-only">5 stars</span><svg
        class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-4" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="4" required disabled /><label class="ecl-rating-field__label" for="rating-field-4"><span
        class="ecl-u-sr-only">4 stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled"
        focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-3" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="3" checked required disabled /><label class="ecl-rating-field__label" for="rating-field-3"><span
        class="ecl-u-sr-only">3 stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled"
        focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-2" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="2" required disabled /><label class="ecl-rating-field__label" for="rating-field-2"><span
        class="ecl-u-sr-only">2 stars</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled"
        focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label><input id="rating-field-1" name="rating-group" class="ecl-rating-field__input" type="radio"
      value="1" required disabled /><label class="ecl-rating-field__label" for="rating-field-1"><span
        class="ecl-u-sr-only">1 star</span><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-filled"
        focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-filled"></use>
      </svg><svg class="ecl-icon ecl-icon--l ecl-rating-field__icon-outline" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.aa842b0d.svg#star-outline"></use>
      </svg></label></div>
</fieldset>

Try it yourself on the playground

Playground