Rating
Preview Available in release assets
Collect one rating value through a native radio group whose selected state is visible without relying on color alone.
Rating in context
<fieldset class="thin-rating">
<legend>Rate this product</legend>
<label>
<input type="radio" name="rating" value="1" required>
<svg aria-hidden="true" data-icon>
<use href="/icons/sprite.svg#thin-icon-star">
</use>
</svg>
<span>1 star</span>
</label>
<label>
<input type="radio" name="rating" value="2">
<svg aria-hidden="true" data-icon>
<use href="/icons/sprite.svg#thin-icon-star">
</use>
</svg>
<span>2 stars</span>
</label>
<label>
<input type="radio" name="rating" value="3">
<svg aria-hidden="true" data-icon>
<use href="/icons/sprite.svg#thin-icon-star">
</use>
</svg>
<span>3 stars</span>
</label>
<label>
<input type="radio" name="rating" value="4">
<svg aria-hidden="true" data-icon>
<use href="/icons/sprite.svg#thin-icon-star">
</use>
</svg>
<span>4 stars</span>
</label>
<label>
<input type="radio" name="rating" value="5">
<svg aria-hidden="true" data-icon>
<use href="/icons/sprite.svg#thin-icon-star">
</use>
</svg>
<span>5 stars</span>
</label>
</fieldset>Show code
<fieldset class="thin-rating">
<legend>Rate this product</legend>
<label>
<input type="radio" name="rating" value="1" required>
<svg aria-hidden="true" data-icon>
<use href="/icons/sprite.svg#thin-icon-star">
</use>
</svg>
<span>1 star</span>
</label>
<label>
<input type="radio" name="rating" value="2">
<svg aria-hidden="true" data-icon>
<use href="/icons/sprite.svg#thin-icon-star">
</use>
</svg>
<span>2 stars</span>
</label>
<label>
<input type="radio" name="rating" value="3">
<svg aria-hidden="true" data-icon>
<use href="/icons/sprite.svg#thin-icon-star">
</use>
</svg>
<span>3 stars</span>
</label>
<label>
<input type="radio" name="rating" value="4">
<svg aria-hidden="true" data-icon>
<use href="/icons/sprite.svg#thin-icon-star">
</use>
</svg>
<span>4 stars</span>
</label>
<label>
<input type="radio" name="rating" value="5">
<svg aria-hidden="true" data-icon>
<use href="/icons/sprite.svg#thin-icon-star">
</use>
</svg>
<span>5 stars</span>
</label>
</fieldset>Anatomy
- Fieldset and legend
- Native radio inputs
- Touch-sized labels
- Decorative Lucide star
- Localized text labels
Variants and sizes
- Interactive one-to-five scale
- Disabled group
- Read-only display using output text rather than disabled controls
Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.
States and difficult content
Rendered fixtures exercise authored content and constrained layouts with the same production assets.
- Unselected
- Selected
- Focused
- Required error
- Disabled
- Forced colors
Structured state fixtures are not published for this item yet.
Interaction and keyboard behavior
Native radio behavior owns focus, arrow-key selection, validation, and submission. Pointer and touch users activate the full label target.
Accessibility
Keep the legend and localized rating text. The star is decorative and currentColor; a checked outline and native radio provide non-color state. For a read-only score, output text such as ‘4 out of 5’ instead of a disabled form group.
- Contract
NATIVE- Basis
- Native fieldset and radio group; no custom rating role
- Evidence
tests/unit/library/quantity-rating.test.ts
API
Use fieldset.thin-rating with same-name radio inputs and explicit values. Author required, checked, disabled, aria-describedby, and server-rendered error text with native form semantics.
Behavior tier: native
Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.
Fallback
The fieldset remains a labeled native radio group that validates and submits one value without CSS or JavaScript.
Assets and dependencies
/components.css
Dependencies: None
Source: packages/ui/src/items/rating/style.ts