J&J Next.js Enterprise Template

Voting — interactive selection

Click an option to vote. Selection is controlled in this demo; supply your own `value` + `onChange` or omit both for uncontrolled.

Optional eyebrow text

Polling question goes here?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga

Show source

<Poll
  eyebrow="Optional eyebrow text"
  question="Polling question goes here?"
  description="At vero eos et accusamus…"
  options={options}
  value={selected}
  onChange={setSelected}
  metadata={<><AvatarStack>…</AvatarStack> <span>10 votes</span> | <span>2 days left</span></>}
/>

With own-answer input

Enable `allowCustomAnswer` to let voters type their own response. Submit on Enter.

Which therapy area should we prioritize?

Show source

<Poll
  question="Which therapy area should we prioritize?"
  options={options}
  allowCustomAnswer
  customAnswer={custom}
  onCustomAnswerChange={setCustom}
  onCustomAnswerSubmit={(v) => console.log("custom vote:", v)}
/>

Results (showResults=true)

Bars fill proportional to each option's vote share. The leading option highlights in brand-red with white text and a checkmark when it matches the user's vote. Annotated `(your vote)` marker on the user's selection.

Optional eyebrow text

Polling question goes here?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga

Option 019%
Option 0218%
Option 039%(your vote)
Option 0455%
Option 059%

Show source

<Poll
  eyebrow="Optional eyebrow text"
  question="Polling question goes here?"
  description="At vero eos et accusamus…"
  options={resultOptions}   // each option has a votes count
  value="o3"                // id of the user's vote
  showResults
  metadata={<>…</>}
/>

Results — no user vote

If the viewer hasn't voted, just display the bars and percentages without a (your vote) marker.

Team favorite release name

Cascade16%
Horizon48%
Pulse28%
Summit8%

Show source

<Poll
  question="Team favorite release name"
  options={resultOptions}
  showResults
  metadata={<>…</>}
/>

Disabled (closed poll)

Lock interaction after a poll closes — options still render but can't be clicked.

Poll closed — results are final

Option 019%
Option 0218%
Option 039%
Option 0455%
Option 059%

Show source

<Poll question="Closed poll" options={options} disabled metadata={…} />