Star Rating Select Component

NOTE: JavaScript is required to handle the filled visual marking of all stars previous to the currently selected star rating.

Star Rating Select with Visual Semantic Grouping

This instance of star rating select uses visible HTML fieldset and legend for semantic grouping.

<div
  role="radiogroup"
  aria-label="Rate this product"
  class="star-rating-select"
>
  <fieldset>
    <legend>Rate this product</legend>
    <span class="star-rating-select__radio">
      <input
        class="star-rating-select__control"
        aria-label="1 Star"
        type="radio"
        value="1"
      />
      <span class="star-rating-select__radio-icon">
        <svg height="16" width="16" aria-hidden="true">
          <use href="#icon-star-dynamic" />
        </svg>
      </span>
    </span>
    <span class="star-rating-select__radio">
      <input
        class="star-rating-select__control"
        aria-label="2 Stars"
        type="radio"
        value="2"
      />
      <span class="star-rating-select__radio-icon">
        <svg height="16" width="16" aria-hidden="true">
          <use href="#icon-star-dynamic" />
        </svg>
      </span>
    </span>
    <span class="star-rating-select__radio">
      <input
        class="star-rating-select__control"
        aria-label="3 Stars"
        type="radio"
        value="3"
      />
      <span class="star-rating-select__radio-icon">
        <svg height="16" width="16" aria-hidden="true">
          <use href="#icon-star-dynamic" />
        </svg>
      </span>
    </span>
    <span class="star-rating-select__radio">
      <input
        class="star-rating-select__control"
        aria-label="4 Stars"
        type="radio"
        value="4"
      />
      <span class="star-rating-select__radio-icon">
        <svg height="16" width="16" aria-hidden="true">
          <use href="#icon-star-dynamic" />
        </svg>
      </span>
    </span>
    <span class="star-rating-select__radio">
      <input
        class="star-rating-select__control"
        aria-label="5 Stars"
        type="radio"
        value="5"
      />
      <span class="star-rating-select__radio-icon">
        <svg height="16" width="16" aria-hidden="true">
          <use href="#icon-star-dynamic" />
        </svg>
      </span>
    </span>
  </fieldset>
</div>

Star Rating Select with Invisible ARIA Semantic Grouping

This instance of star rating select uses an invisible ARIA radio group for semantic grouping.

<div
  role="radiogroup"
  aria-label="Rate this product"
  class="star-rating-select"
>
  <span class="star-rating-select__radio">
    <input
      class="star-rating-select__control"
      aria-label="1 Star"
      type="radio"
      value="1"
    />
    <span class="star-rating-select__radio-icon">
      <svg height="16" width="16" aria-hidden="true">
        <use href="#icon-star-dynamic" />
      </svg>
    </span>
  </span>
  <span class="star-rating-select__radio">
    <input
      class="star-rating-select__control"
      aria-label="2 Stars"
      type="radio"
      value="2"
    />
    <span class="star-rating-select__radio-icon">
      <svg height="16" width="16" aria-hidden="true">
        <use href="#icon-star-dynamic" />
      </svg>
    </span>
  </span>
  <span class="star-rating-select__radio">
    <input
      class="star-rating-select__control"
      aria-label="3 Stars"
      type="radio"
      value="3"
    />
    <span class="star-rating-select__radio-icon">
      <svg height="16" width="16" aria-hidden="true">
        <use href="#icon-star-dynamic" />
      </svg>
    </span>
  </span>
  <span class="star-rating-select__radio">
    <input
      class="star-rating-select__control"
      aria-label="4 Stars"
      type="radio"
      value="4"
    />
    <span class="star-rating-select__radio-icon">
      <svg height="16" width="16" aria-hidden="true">
        <use href="#icon-star-dynamic" />
      </svg>
    </span>
  </span>
  <span class="star-rating-select__radio">
    <input
      class="star-rating-select__control"
      aria-label="5 Stars"
      type="radio"
      value="5"
    />
    <span class="star-rating-select__radio-icon">
      <svg height="16" width="16" aria-hidden="true">
        <use href="#icon-star-dynamic" />
      </svg>
    </span>
  </span>
</div>