kit

Rating

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

Rating

4.5 from 38 reviews

4.5 من 38 مراجعة

How was the hall?
4 stars Other hirers see your rating on the hall's page.

Your rating while bookings cannot be changed.

How was the hall?
4 stars
How helpful was the caretaker?
Not rated
Source
<span data-kit-role="rating" role="img" aria-label="4.5 out of 5, from 38 reviews">
  <span data-kit-region="stars" style="--kit-rating: 4.5"></span>
  <span data-kit-region="score"><span data-kit-role="amount">4.5</span> from <span data-kit-role="amount">38</span> reviews</span>
</span>
<p dir="rtl" lang="ar"><span data-kit-role="rating" role="img" aria-label="4.5 من 5، من 38 مراجعة">
  <span data-kit-region="stars" style="--kit-rating: 4.5"></span>
  <span data-kit-region="score"><span data-kit-role="amount">4.5</span> من <span data-kit-role="amount">38</span> مراجعة</span>
</span></p>
<div data-kit-role="form-group" data-kit-holds="help" id="rating-hall">
  <fieldset>
    <legend id="rating-hall-label">How was the hall?</legend>
    <div data-kit-role="rating" id="rating-hall-control">
      <label data-kit-region="star"><input type="radio" name="hall" value="1" aria-describedby="rating-hall-help"><span data-kit-region="star-name">1 star</span></label>
      <label data-kit-region="star"><input type="radio" name="hall" value="2" aria-describedby="rating-hall-help"><span data-kit-region="star-name">2 stars</span></label>
      <label data-kit-region="star"><input type="radio" name="hall" value="3" aria-describedby="rating-hall-help"><span data-kit-region="star-name">3 stars</span></label>
      <label data-kit-region="star"><input type="radio" name="hall" value="4" checked aria-describedby="rating-hall-help"><span data-kit-region="star-name">4 stars</span></label>
      <label data-kit-region="star"><input type="radio" name="hall" value="5" aria-describedby="rating-hall-help"><span data-kit-region="star-name">5 stars</span></label>
      <span data-kit-region="value" aria-hidden="true"><span>1 star</span><span>2 stars</span><span>3 stars</span><span>4 stars</span><span>5 stars</span></span>
      <label data-kit-region="clear" data-kit-role="subtle-action"><input type="radio" name="hall" value="" aria-describedby="rating-hall-help">Clear</label>
    </div>
  </fieldset>
  <output for="rating-hall-control">4 stars</output>
  <span data-kit-region="help" id="rating-hall-help">Other hirers see your rating on the hall's page.</span>
</div>
<p class="specimen-case-line">Your rating while bookings cannot be changed.</p>
<div data-kit-role="form-group" id="rating-hall-disabled">
  <fieldset>
    <legend id="rating-hall-disabled-label">How was the hall?</legend>
    <div data-kit-role="rating" id="rating-hall-disabled-control">
      <label data-kit-region="star"><input type="radio" name="hall-disabled" value="1" disabled><span data-kit-region="star-name">1 star</span></label>
      <label data-kit-region="star"><input type="radio" name="hall-disabled" value="2" disabled><span data-kit-region="star-name">2 stars</span></label>
      <label data-kit-region="star"><input type="radio" name="hall-disabled" value="3" disabled><span data-kit-region="star-name">3 stars</span></label>
      <label data-kit-region="star"><input type="radio" name="hall-disabled" value="4" checked disabled><span data-kit-region="star-name">4 stars</span></label>
      <label data-kit-region="star"><input type="radio" name="hall-disabled" value="5" disabled><span data-kit-region="star-name">5 stars</span></label>
      <span data-kit-region="value" aria-hidden="true"><span>1 star</span><span>2 stars</span><span>3 stars</span><span>4 stars</span><span>5 stars</span></span>
      <label data-kit-region="clear" data-kit-role="subtle-action"><input type="radio" name="hall-disabled" value="" disabled>Clear</label>
    </div>
  </fieldset>
  <output for="rating-hall-disabled-control">4 stars</output>
</div>
<div data-kit-role="form-group" id="rating-caretaker">
  <fieldset>
    <legend id="rating-caretaker-label">How helpful was the caretaker?</legend>
    <div data-kit-role="rating" id="rating-caretaker-control">
      <label data-kit-region="star"><input type="radio" name="caretaker" value="1"><span data-kit-region="star-name">1 star</span></label>
      <label data-kit-region="star"><input type="radio" name="caretaker" value="2"><span data-kit-region="star-name">2 stars</span></label>
      <label data-kit-region="star"><input type="radio" name="caretaker" value="3"><span data-kit-region="star-name">3 stars</span></label>
      <label data-kit-region="star"><input type="radio" name="caretaker" value="4"><span data-kit-region="star-name">4 stars</span></label>
      <label data-kit-region="star"><input type="radio" name="caretaker" value="5"><span data-kit-region="star-name">5 stars</span></label>
      <span data-kit-region="value" aria-hidden="true"><span>1 star</span><span>2 stars</span><span>3 stars</span><span>4 stars</span><span>5 stars</span></span>
    </div>
  </fieldset>
  <output for="rating-caretaker-control">Not rated</output>
</div>