HTML + CSSRadio buttons
Emoji face rating scale
Five faces to rate an experience: the chosen one grows and shows its label while the rest fade to grey.
Settings
16px
1x
Code
<fieldset class="uv-rem"><legend>How was your order?</legend><div class="op"><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">😣</span><span class="tx">Very bad</span></label><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">🙁</span><span class="tx">Not great</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">Good</span></label><label><input type="radio" name="uv-rem"><span class="fc" aria-hidden="true">😍</span><span class="tx">Love it</span></label></div></fieldset>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
See all Radio buttonsWhere to use it
Quick satisfaction questions get more answers when they take one tap. This radio group shows five faces from upset to delighted; the selected one scales up with a colored ring and reveals a short word under it, while the others stay small and grey. Place it after an order, a support chat or a class.
Each face is a real radio button, so arrow keys move between them and screen readers read the word, not the emoji. Change the question with the text control and use warm yellow or your brand color for the ring.