FastPoll Component | Quick Polls & Multi-Choice Surveys

FastPoll is a web component for single or multi-choice polls. Perfect for quick validation, gathering structured feedback, and understanding user opinions in seconds.

@sensefolks/fastpoll

FastPoll Features

🎯 Single and multiple choice poll modes
📝 Optional follow-up questions for deeper insights
♿ WCAG 2.1 AA accessible out of the box
⌨️ Full keyboard navigation (Tab, Arrow keys, Enter/Space)
🔊 Screen reader optimized with ARIA live regions
🎨 Fully customizable via CSS Parts
📱 Mobile-first responsive design
🌐 Works with React, Vue, Angular, and vanilla JS

When to Use FastPoll

Embed FastPoll where quick validation and feedback is needed:

Blog posts and tutorial pages — "Was this helpful?"
Feature announcement banners — "Interested in this feature?"
Release notes — "How do you feel about this update?"
Community and resource pages — "What topic should we cover next?"

Installation

CDN (Recommended)

html

<!-- Modern browsers (ES modules) -->
<script type="module" src="https://unpkg.com/@sensefolks/fastpoll/dist/sf-fastpoll/sf-fastpoll.esm.js"></script>

<!-- Legacy browsers -->
<script nomodule src="https://unpkg.com/@sensefolks/fastpoll/dist/sf-fastpoll/sf-fastpoll.js"></script>

NPM

bash

npm install @sensefolks/fastpoll

Usage

HTML

html

<sf-fastpoll 
  survey-key="your-survey-uuid" 
  completion-message="Thank you for your feedback!">
</sf-fastpoll>

React

jsx

import '@sensefolks/fastpoll';

function App() {
  return (
    <sf-fastpoll 
      survey-key="your-survey-uuid" 
      completion-message="Thank you!">
    </sf-fastpoll>
  );
}

Vue

vue

<template>
  <sf-fastpoll 
    survey-key="your-survey-uuid" 
    completion-message="Thank you!">
  </sf-fastpoll>
</template>

<script>
import '@sensefolks/fastpoll';
export default {name: 'App'};
</script>

Angular

typescript

// app.module.ts
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import '@sensefolks/fastpoll';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

API Reference

Properties

Property	Attribute	Type	Default	Description
`surveyKey`	`survey-key`	string	—	UUID of the survey to load
`completionMessage`	`completion-message`	string	'Thank you for your response!'	Message shown after submission

CSS Parts

Style the component using CSS Parts:

css

sf-fastpoll::part(survey-container) {
  /* Main container */
}
sf-fastpoll::part(heading) {
  /* Step headings */
}
sf-fastpoll::part(choices-container) {
  /* Poll options container */
}
sf-fastpoll::part(choice-option) {
  /* Individual choice */
}
sf-fastpoll::part(button) {
  /* All buttons */
}
sf-fastpoll::part(next-button) {
  /* Next/Submit button */
}
sf-fastpoll::part(back-button) {
  /* Back button */
}
sf-fastpoll::part(error-message) {
  /* Error messages */
}
sf-fastpoll::part(form-field) {
  /* Form fields */
}
sf-fastpoll::part(form-label) {
  /* Form labels */
}
sf-fastpoll::part(input) {
  /* Input elements */
}

Accessibility

Full keyboard navigation (Tab, Arrow keys, Enter/Space)
ARIA labels and live regions for screen readers
Focus indicators and high contrast mode support
Respects prefers-reduced-motion

Browser Support

Browser	Version
Chrome	88+
Firefox	85+
Safari	14+
Edge	88+
IE11	✅ (ES5 build)