Ditch the Boring Radios: Create a Star Rating System with Just HTML, CSS & JavaScript

3rd May 2025

A cartoon file folder with a mischievous face

Create an interactive, accessible star rating component without relying on frameworks.

Default Inputs Wouldn’t Cut It

While working on our website, I needed a clean and user-friendly way for users to leave a rating. The default radio buttons just didn’t look or feel right for a 5-star system.

The Goal: Eye-catching and Functional

I wanted to replace standard radio inputs with an interactive star rating component that users could easily click or tap. It had to meet three key criteria:

✅ Accessible to screen readers and keyboard users
✅ Simple to style and customize
✅ Compatible with standard HTML forms

The Approach: HTML, CSS, and Just a Bit of JavaScript

1. The HTML

I started with five <input type="radio"> elements (one for each star), each paired with a <label> that would contain the <svg> of the star. Here’s the basic structure:

<fieldset class="star-rating">
  <legend>Rating</legend>
  <input type="radio" name="rating" id="star1" value="1" />
  <label for="star1">
    <svg></svg>
  </label>
  <!-- repeat for stars 2 - 5 -->
</fieldset>

The Result: A Simple, Accessible and Functional Rating Component

The custom star rating UI improved the user experience significantly. It looked great across devices, felt intuitive, and was easy to maintain. Plus, it’s fully accessible and fits right into any form-based interaction.

Conclusion

If you’re looking to elevate your form UI, replacing default radio buttons with a star rating is a quick win. It’s approachable even for beginners, and with just a bit of CSS and JavaScript, you can build something that looks and feels polished.

Useful links:

Tags:

css

javascript