UserChoice Component | A/B Preference Testing & Choice Surveys

UserChoice is a web component for choice-based preference research. Run A/B tests, conjoint analysis, and multi-task choice surveys to design better product offerings.

@sensefolks/userchoice

UserChoice Features

🎯 Multi-task choice surveys for preference research
📊 A/B testing and conjoint analysis support
♿ WCAG 2.1 AA accessible out of the box
⌨️ Full keyboard navigation (Tab, Arrow keys, Enter/Space)
🔊 Screen reader optimized with progress announcements
🎨 Fully customizable via CSS Parts
📱 Mobile-first responsive design
🌐 Works with React, Vue, Angular, and vanilla JS

When to Use UserChoice

Embed UserChoice where users can help prioritize product decisions:

Product roadmap pages — let users vote on features
Feature request pages — understand which options users prefer
Upcoming features sections — validate concepts before building
Beta and early-access pages — gather preference data from engaged users

Installation

CDN (Recommended)

html

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

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

NPM

bash

npm install @sensefolks/userchoice

Usage

HTML

html

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

React

jsx

import '@sensefolks/userchoice';

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

Vue

vue

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

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

Angular

typescript

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

@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-userchoice::part(survey-container) {
  /* Main container */
}
sf-userchoice::part(heading) {
  /* Step headings */
}
sf-userchoice::part(concept) {
  /* Choice concept cards */
}
sf-userchoice::part(button) {
  /* All buttons */
}
sf-userchoice::part(progress) {
  /* Progress indicator */
}
sf-userchoice::part(error-message) {
  /* Error messages */
}

Accessibility

Full keyboard navigation (Tab, Arrow keys, Enter/Space)
ARIA labels and live regions for screen readers
Progress announcements ("Choice Task 2 of 5")
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)