Sin valorar
HTML + CSSRadio buttons
Star rating with label
Stars fill up to the one you click, pop briefly and a word below says what the rating means.
Settings
16px
1x
Code
<div class="uv-rdt"><div class="rw"><button data-v="1"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="2"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="3"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="4"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="5"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button></div><b class="lb">Not rated</b></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
Where to use it
The familiar five-star rating, for reviews and quick feedback: rating a product after delivery, scoring an online course or the “How was your meal?” screen of a restaurant app. The label underneath changes from “Very bad” to “Excellent”, which helps people choose. A CSS star rating with a small script to fill the stars.
Translate the five labels into your own tone of voice; they matter more than they seem. If you show the average rating somewhere else on the page, use the same colour for both.