Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Poll

A question with a few answers. Before voting the answers are a plain list of buttons; choosing one reveals the results, each bar growing to its share, your vote ticked and the leader in bold, with Change vote to take it back.

Pro
pnpm dlx shadcn@latest add @caliper/poll

Team offsite

Posted by Lena Fischer in #general

Where should we go in March?

22 votes· Closes Friday

Installs components/ui/poll.tsxDepends on lucide-reactMotion none in component source

When to use

Use it for

  • Quick decisions in a team space: an offsite, a release name, a meeting time.
  • Community posts where seeing others' answers is the point.

Skip it when

  • Forms where the answer must be validated or stored per person; use radio buttons.
  • Ranking or many questions; use a survey.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Results after voting
Answers stay buttons until you vote, so the current leader cannot sway you.
Numbers in words
Each result says its share and its vote count; the tick is named "Your vote".

Installation

terminal
pnpm dlx shadcn@latest add @caliper/poll

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { Poll } from "@/components/ui/poll"

The worked example comes with Pro

The 32-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

Poll

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
question *string—
options *readonly PollOption[]—
votestring | null—The option this reader chose. Leave out to let the poll keep its own vote.
defaultVotestring | nullnull
onVote((option: string | null) => void)—Called with the new choice, or null when the reader takes their vote back.
closedbooleanfalseNo more voting: the results show to everyone.
notestring—A line under the results, e.g. "Closes Friday".

Accessibility

It is built on native elements and keeps aria-labelledby, aria-hidden, aria-label and aria-live in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Choice groups examples