Fylgja Review Stars

Review stars are a rating input: a row of stars where selecting one fills it and every star before it. Fylgja builds it from radio buttons and the input group --steps modifier, so it stays a real form control with no JavaScript.

Preview

Your rating 
<fieldset>
	<legend>Your rating</legend>
	<div class="input-group --steps">
		<label>
			<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><defs><path id="star" style="fill: var(--_not-checked, none) var(--_is-checked, currentColor)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></defs><title>Rating 1</title><use href="#star" /></svg>
			<input type="radio" name="rating" value="1" />
		</label>
		<label>
			<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><title>Rating 2</title><use href="#star" /></svg>
			<input type="radio" name="rating" value="2" />
		</label>
		<label>
			<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><title>Rating 3</title><use href="#star" /></svg>
			<input type="radio" name="rating" value="3" />
		</label>
		<label>
			<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><title>Rating 4</title><use href="#star" /></svg>
			<input type="radio" name="rating" value="4" checked />
		</label>
		<label>
			<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><title>Rating 5</title><use href="#star" /></svg>
			<input type="radio" name="rating" value="5" />
		</label>
	</div>
</fieldset>

Usage

  • Wrap the control in a <fieldset> with a <legend> naming what is being rated.
  • Put the stars in a <div class="input-group --steps">.
  • Each star is a <label> holding an SVG star and a radio <input> that shares one name. The input group hides the radios; the labels stay clickable.
  • The star SVG fills via --_is-checked / --_not-checked, which --steps sets per label, so every star up to the selected one appears filled.
  • Give each star a <title> (“Rating 1” … “Rating 5”) for an accessible name.

Accessibility

  • Radios give real single-select rating semantics and arrow-key navigation.
  • The <legend> labels the group, and each star’s <title> labels its option.
  • The control submits its value with a form, no scripting required.

FAQ

Does the star rating need JavaScript?

No. It is radio buttons plus the input-group --steps modifier. Selecting a star checks its radio, and CSS fills every star up to it.

How does a star know whether to fill?

The --steps modifier toggles --_is-checked / --_not-checked on each label, and the star SVG's fill reads them, so stars up to the checked one fill and the rest stay outlined.