Poll

Pro

Poll whose options turn into result bars once you vote, with percentages that roll in and the leader highlighted. Supports multiple choice and a quiz mode with a right answer.

Preview

Installation

npx @lumioui/cli add pro/poll

Usage

import { Poll } from "@/components/ui/poll/poll";
<Poll />

Examples

Group chat

A multiple-choice poll posted in a group chat, teal accent, in the compact "line" layout.

Social post

A poll inside a social post, coral accent.

Trivia quiz

A daily trivia card, amber accent.

API reference

Prop Type Default
options* PollOption[] —
question string

Question shown above the options.

 —
vote string[]

Controlled vote (option ids). Empty or undefined = not voted yet.

 —
defaultVote string[]

Uncontrolled initial vote.

 —
onVote (ids: string[]) => void

Fires when the viewer votes (or retracts, with []).

 —
multiple boolean

Multiple choice: rows toggle, a Vote button submits. Default false.

 false
closed boolean

Voting closed — results only.

 false
correctId string

Quiz mode: the right answer, revealed after voting.

 —
allowRetract boolean

Show an "Undo" link after voting. Default false.

 false
variant "fill" | "line"

fill — bars fill each row (social feeds). line — percentage column with a thin bar under the label (in-chat). Default "fill".

 "fill"
meta string

Footer meta after the vote total, e.g. "2 days left".

 —
formatTotal (n: number) => string

Vote-total formatter. Default "1,284 votes".

 (n) => `${n.toLocaleString("en…
submitLabel string

Multiple-choice submit label. Default "Vote".

 "Vote"
className string —