Rating

Example

<fieldset data-slean="rating">
	<legend>Your rating</legend>
	<label>
		<input type="radio" name="rating-score" value="0" />
		<span>No rating</span>
	</label>
	<label>
		<input type="radio" name="rating-score" value="1" />
		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
		<span>1 star</span>
	</label>
	<label>
		<input type="radio" name="rating-score" value="2" />
		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
		<span>2 stars</span>
	</label>
	<label>
		<input type="radio" name="rating-score" value="3" checked />
		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
		<span>3 stars</span>
	</label>
	<label>
		<input type="radio" name="rating-score" value="4" />
		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
		<span>4 stars</span>
	</label>
	<label>
		<input type="radio" name="rating-score" value="5" />
		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
		<span>5 stars</span>
	</label>
</fieldset>

<script lang="ts">
	// Nothing to import: the browser owns the radios. The stylesheet is optional.
	import '@svelte-lean/styles/rating.css';

	let score = $state(3);
</script>

<fieldset data-slean="rating">
	<legend>Your rating</legend>
	<label>
		<input type="radio" name="rating-score" value={0} bind:group={score} />
		<span>No rating</span>
	</label>
	{#each [1, 2, 3, 4, 5] as value (value)}
		<label>
			<input type="radio" name="rating-score" {value} bind:group={score} />
			<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
			<span>{value} {value === 1 ? 'star' : 'stars'}</span>
		</label>
	{/each}
</fieldset>

Why this implementation exists

A star rating is one choice among five values, which is what radios sharing a name are. The browser keeps one checked, moves it with the arrow keys, makes the group a single tab stop, submits the value, and names each radio from its label; a rating component rebuilds those in script and adds aria-checked to mirror them.

The stylesheet draws the stars. label:has(input:checked) and label:has(~ label input:checked) fill the checked star and every star before it, the same two selectors with :hover preview a value under a hovering pointer, and each radio covers its star, transparent and focusable. The text of each value (“3 stars”) is in the label and hidden visually, so screen readers hear the value rather than a picture.

Usage

The markup needs no package. Install @svelte-lean/styles for the stylesheet; @svelte-lean/primitives adds the typed contract and nothing at runtime.

npm install @svelte-lean/styles

pnpm add @svelte-lean/styles

yarn add @svelte-lean/styles

bun add @svelte-lean/styles

import '@svelte-lean/styles/rating.css';

Put data-slean="rating" on a <fieldset> with a <legend>, and one <label> per value in ascending order. Each label holds a radio, an inline <svg aria-hidden="true"> star and a <span> with the value’s name.

An optional first label without an svg is the “no rating” option; it is drawn as a cross and clears the rating.

Bind the value with bind:group, read it from FormData, or listen to the native change event.

Anatomy

Runtime profile

Tier 0: the rating has no behavior module, the Vite plugin maps rating to no module, and the native-only fixture proves the path ships no Svelte Lean JavaScript.

Accessibility contract

• The fieldset is a group named by its legend; each radio is named by its visually hidden text (“1 star”, “No rating”), because the star is aria-hidden.
• The group is one tab stop; the arrow keys move the value and wrap. With the “no rating” option, the keyboard reaches “no value” as well.
• The focus ring is drawn around the focused star, only for keyboard focus.
• A filled star and an empty one differ in fill and outline, not only in hue; the fill is the accent token, as for a checked checkbox.
• Forced colors: filled stars take the Highlight system color, empty stars an outline in the text color.

Keyboard

Platform features

Without JavaScript

Fully functional, hover preview included.

Server rendering

The checked attribute renders the initial value, and the filled stars are drawn by CSS from it, so the server’s markup shows the rating before any script runs.

Before hydration

Nothing is attached; the radios work before and after hydration alike.

Styling

rating.css places the labels in a row, covers each star with its transparent radio, hides the value text visually, fills the stars up to the checked one from the accent token, previews under (hover: hover), draws the cross of the no-rating option with two pseudo-elements, and dims a disabled rating. The star shape is the author’s svg; the stylesheet sets its fill and stroke. The tokens it reads:

State selectors the stylesheet targets, all from the platform or ARIA: :checked, :disabled, :focus-visible, :hover, [type="radio"].

Compatibility notes

Radios, fieldsets and inline SVG are widely available. The filled stars and the preview are selected with :has(), Baseline 2023; where it is missing no star is filled and the radios keep working.

Examples

Disabled

disabled on the fieldset takes every radio out of the tab order and the form data, dims the stars and turns the hover preview off. The checked value stays visible. For an average that is not a whole number, show text or a Meter instead.

<fieldset data-slean="rating" disabled>
	<legend>Rated by the team</legend>
	<label>
		<input type="radio" name="rating-average" value="1" />
		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
		<span>1 star</span>
	</label>
	<label>
		<input type="radio" name="rating-average" value="2" />
		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
		<span>2 stars</span>
	</label>
	<label>
		<input type="radio" name="rating-average" value="3" />
		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
		<span>3 stars</span>
	</label>
	<label>
		<input type="radio" name="rating-average" value="4" checked />
		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
		<span>4 stars</span>
	</label>
	<label>
		<input type="radio" name="rating-average" value="5" />
		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z" /></svg>
		<span>5 stars</span>
	</label>
</fieldset>

Testing

• apps/playground/tests/primitives/forms.spec.ts Playwright: keyboard, form values, :user-invalid, names and descriptions, axe
• packages/styles/tests static checks of the stylesheet (layers, tokens, specificity, dark parity)
• fixtures/native-only consumer build asserting that no behavior runtime ships (invariant A)

Source

• packages/primitives/src/rating/contract.md the contract in prose: semantics, keyboard, focus, ARIA, SSR, JS-disabled behavior
• packages/primitives/src/rating/contract.ts typed constants: name, tier, base, parts, options, events
• packages/styles/css/rating.css the optional stylesheet