Forms

Rating

Stars to click, built on radio buttons so they work in forms and with a keyboard. Plus stars that only show a score.

Stars to click

HTML

<fieldset class="pw-rating" data-pw-rating data-labels="Poor,Fair,Good,Very good,Excellent" id="demo-rating">
  <legend>How was your stay?</legend>
  <span class="pw-rating-stars">
    <label><input type="radio" name="stay" value="1"></label>
    <label><input type="radio" name="stay" value="2"></label>
    <label><input type="radio" name="stay" value="3"></label>
    <label><input type="radio" name="stay" value="4" checked></label>
    <label><input type="radio" name="stay" value="5"></label>
  </span>
  <span class="pw-rating-text"></span>
</fieldset>

Stars that show a score

CSS only. Set the score in --value, from 0 to 5. Parts of a star work too.

4.5 from 128 reviews

HTML

<span class="pw-stars" style="--value: 4.5" role="img" aria-label="4.5 out of 5 stars"></span>
<span>4.5 from 128 reviews</span>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-labels`		A word for each star, shown next to the stars.
`data-clear`	`true`	`false`: a second click on the chosen star does not clear it.
`data-empty`		Text when no star is chosen.

Classes

Class	What it does
`pw-rating--lg`	Larger stars.
`pw-stars`	Score only, not clickable.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:change`	With `value`, 0 to 5.

From your script

var r = Partwise.get('#demo-rating', 'rating');
r.value; r.value = 5;

Keyboard

Key	Action
`Left` `Right`	One star less or more
`Tab`	Into and out of the stars

Good to know

The star colour is --pw-rating.
Add required to the first radio button to make a rating necessary.
For another number of stars, write more or fewer radio buttons.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/23-inputs.css, js/23-inputs.js.