HTML + CSSRadio buttons
Escala de caras
Cinco caras para valorar una experiencia: la elegida crece y muestra su nombre y las demás pasan a gris.
Ajustes
16px
1x
Código
<fieldset class="uv-rem"><legend>¿Qué tal tu pedido?</legend><div class="op"><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">😣</span><span class="tx">Muy mal</span></label><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">🙁</span><span class="tx">Regular</span></label><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">😐</span><span class="tx">Normal</span></label><label><input type="radio" name="uv-rem" checked><span class="fc" aria-hidden="true">🙂</span><span class="tx">Bien</span></label><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">😍</span><span class="tx">Me encanta</span></label></div></fieldset>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
Ver todos: Radio buttonsDónde usarlo
Las preguntas rápidas de satisfacción reciben más respuestas cuando se contestan con un toque. Este grupo de radios muestra cinco caras, de enfadada a encantada; la elegida crece con un anillo de color y enseña una palabra debajo, mientras las demás se quedan pequeñas y en gris. Ponlo tras un pedido, un chat de soporte o una clase.
Cada cara es un radio de verdad, así que las flechas del teclado pasan de una a otra y los lectores de pantalla leen la palabra, no el emoji. Cambia la pregunta con el control de texto.