Rating

Star rating component using native <input type="radio">. Accessible, keyboard-navigable, zero JS required.

Star Rating

Rate this product 
<fieldset class="rating">
  <legend>Rate this product</legend>
  <label>
    <input type="radio" name="stars" value="1">
    <span aria-label="1 star">★</span>
  </label>
  <label>
    <input type="radio" name="stars" value="2">
    <span aria-label="2 stars">★</span>
  </label>
  <label>
    <input type="radio" name="stars" value="3" checked>
    <span aria-label="3 stars">★</span>
  </label>
  <label>
    <input type="radio" name="stars" value="4">
    <span aria-label="4 stars">★</span>
  </label>
  <label>
    <input type="radio" name="stars" value="5">
    <span aria-label="5 stars">★</span>
  </label>
</fieldset>

Read-Only Display

For displaying a rating without interaction, use aria-label on the container:

<p aria-label="Rated 4 out of 5 stars">
  ★★★★☆
</p>

Accessibility

  • Use <fieldset> + <legend> — groups the radio buttons semantically
  • Each <input type="radio"> is keyboard navigable (arrow keys)
  • Label text aria-label on <span> provides screen reader context
  • Never rely on star emoji alone — always include numeric aria-labels

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Rating component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.