Poll Card

A social poll in a card. Pick one option or several (with a cap), vote, and the results slide in as bars with percentages, a check on your choice and the leader picked out. Shows total votes and time left, lets voters change or remove their vote, can show results before voting, and settles into final results with a winner once it closes.

Tags: poll vote survey social community results card radio
Dependencies: lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

question*
string
options*
PollOption[]
multiple
boolean
Default false
Checkboxes instead of radios.
maxChoices
number
With multiple, the most options a voter can pick.
author
PollAuthor
postedAt
string
A short label for when it was posted, e.g. "2h".
endsAt
string | Date
When voting closes. Past this the poll shows final results.
now
string | Date
The current time. Pass it on the server so the prerendered "time left" matches; otherwise the client's clock is used.
closed
boolean
Default false
Force the poll closed, regardless of endsAt.
defaultValue
string[]
Default []
The viewer's vote, uncontrolled. An empty array means they haven't voted.
value
string[]
The viewer's vote, controlled.
onVote
(ids: string[]) => void | Promise<void>
Called with the chosen option ids when the viewer votes, or with [] when they take it back. Return a promise to show a busy state.
showResultsBeforeVoting
boolean
Default false
Lets voters peek at the results before choosing.
allowChange
boolean
Default true
Lets voters change their mind while the poll is open.
voters
number
With multiple, how many people have voted (not counting the viewer). Shown instead of the vote total.

Props
			Description
question*	string	–
options*	PollOption[]	–
multiple	boolean	false	Checkboxes instead of radios.
maxChoices	number	–	With `multiple`, the most options a voter can pick.
author	PollAuthor	–
postedAt	string	–	A short label for when it was posted, e.g. "2h".
endsAt	string \| Date	–	When voting closes. Past this the poll shows final results.
now	string \| Date	–	The current time. Pass it on the server so the prerendered "time left" matches; otherwise the client's clock is used.
closed	boolean	false	Force the poll closed, regardless of `endsAt`.
defaultValue	string[]	[]	The viewer's vote, uncontrolled. An empty array means they haven't voted.
value	string[]	–	The viewer's vote, controlled.
onVote	(ids: string[]) => void \| Promise<void>	–	Called with the chosen option ids when the viewer votes, or with [] when they take it back. Return a promise to show a busy state.
showResultsBeforeVoting	boolean	false	Lets voters peek at the results before choosing.
allowChange	boolean	true	Lets voters change their mind while the poll is open.
voters	number	–	With `multiple`, how many people have voted (not counting the viewer). Shown instead of the vote total.