HTML + CSSRadio buttons
Poll with live results
After voting, every option turns into a bar that grows to its percentage.
Settings
16px
1x
Code
<fieldset class="uv-rpl"><legend>Where will you spend your holidays?</legend><label style="--v:46%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Beach</span><span class="pc">46 %</span></label><label style="--v:31%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">Mountains</span><span class="pc">31 %</span></label><label style="--v:17%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">City</span><span class="pc">17 %</span></label><label style="--v:6%"><input type="radio" name="uv-rpl"><span class="br"></span><span class="tx">At home</span><span class="pc">6 %</span></label><p class="ft">1,284 votes</p></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
Polls are more fun when you see the result right away. Before voting, this card shows plain outlined options; after a choice, every row becomes a bar that grows to its share, the percentages slide in, your option gets a tick and a softly colored bar, and the total vote count fades in at the bottom.
Percentages are set per option with a CSS variable, so you can fill them from your backend. It suits blogs, newsletters, community apps and event pages, and it works without JavaScript thanks to the :has selector.