Sin valorar
HTML + CSSRadio buttons
Valoración con estrellas y texto
Las estrellas se rellenan hasta la que pulsas, dan un pequeño salto y debajo aparece qué significa la nota.
Ajustes
16px
1x
Código
<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">Sin valorar</b></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Radio buttons
Dónde usarlo
Las cinco estrellas de siempre, para reseñas y opiniones rápidas: valorar un producto al recibirlo, puntuar un curso online o la pantalla de «¿Qué tal la comida?» de la app de un restaurante. La etiqueta de debajo pasa de «Muy malo» a «Excelente» y ayuda a decidir. Una valoración con estrellas en CSS con un pequeño script.
Adapta las cinco etiquetas a tu forma de hablar; importan más de lo que parece. Si en otra parte de la página enseñas la nota media, usa el mismo color en las dos.