shadcn.io is not affiliated with official shadcn/ui
Reader Poll Blog Block for React
A reader poll in a split: a RadioGroup of four choices and a Vote button at the start, result bars with percentages, vote counts and a total at the end, and a Change vote button that takes your vote back.
Installation
Overview
A reader poll for React with Base UI, written for Pollen Weekly, a beekeeping newsletter. A start-aligned header sits over a split behind a divider. At the start is the question with four choices, a RadioGroup of cells on shared hairlines, and a Vote Shine Button. At the end are the results: the same four rows, empty until you vote, then a bar, a percentage and a vote count each, your vote counted in, and the total. Change vote takes your vote back, so a vote moves a count by one and back. On a phone the results sit under the question. The 612 earlier votes are example data, and your vote stays in the page. It is built from Guides, RadioGroup, Field, Progress, Button and a Shine Button. For newsletters, blogs and any page that asks its readers one question.
FAQ
Are the votes real?
No. The 612 votes before yours are example data, and the page says so under the results. Your vote is held in the page and is gone on reload. To make it real, send the choice in the vote handler and replace votes in OPTIONS with the counts your server returns.
How are the percentages worked out?
From the votes shown, with whole numbers that always add to 100: each share is rounded down and the leftover points go to the largest fractions (sharesOf). Add or change an option and every percentage, bar and the total follow, because nothing is typed in twice.
What does Change vote do?
It removes your vote, so the choice you made counts one less, the results empty again and the choices unlock. Focus returns to the first choice. Voting adds one to exactly one option, so you can vote, look, take it back and choose differently as often as you like.
Related
- Pro
Comment Thread Blog
Reader feedbackA blog comment thread on hairline rows: top-level comments with initials avatars and fixed dates, replies in a Collapsible, and a form with an empty-submit check that adds your comment to the thread.
- Pro
Reaction Bar Blog
Reader feedbackA reaction bar under a review: five icon reactions with rolling counts in one raised strip, any number on at once, and a line that names the top reaction from the counts.
- Pro
Was This Useful Feedback Blog
Reader feedbackA Was this useful? widget: Yes and No toggles with rolling counts, a No that opens reason chips, a note and a Send button in a panel that never changes height, and recent reader notes with star ratings.
- Pro
Round Tabs Debate Blog
Story formatsA two-sided debate in three round tabs, For and Against side by side with a writer, an argument and three key points each, and a reader poll that moves by one and back.
- Pro
Reading Preferences Blog
Reading toolsReader preferences with a live preview: a Slider for text size, a ToggleGroup for serif or sans, a Select for line spacing and a Switch for justified text, with a framed sample article that follows every control and a Reset button.
- Pro
Inline Subscribe Newsletter Blog
Subscribe and alertsAn end-of-post newsletter sign-up: an email field with the Subscribe button inside it, a message slot that never moves, and a confirmation that replaces the form in the same space.