QuestionRating

Numeric, star, or emoji rating scale implemented as an accessible radiogroup with roving tabindex and configurable min/max

QuestionRating renders a row of selectable options as an accessible role="radiogroup". Supports numeric buttons, star icons, or emoji, with full keyboard navigation via roving tabindex.

Import

import { QuestionRating } from '@tour-kit/surveys';

Usage

NPS (0–10 numeric)

<QuestionRating
  id="nps-score"
  label="How likely are you to recommend us to a friend?"
  min={0}
  max={10}
  style="numeric"
  lowLabel="Not at all likely"
  highLabel="Extremely likely"
  onChange={(value) => survey.answer('nps-score', value)}
/>

Star rating (1–5)

<QuestionRating
  id="satisfaction"
  label="How satisfied are you?"
  min={1}
  max={5}
  style="stars"
  onChange={(value) => survey.answer('satisfaction', value)}
/>

Emoji rating with custom map

<QuestionRating
  id="mood"
  label="How are you feeling today?"
  min={1}
  max={5}
  style="emoji"
  emojiMap={{ 1: '😡', 2: '😞', 3: '😐', 4: '🙂', 5: '😍' }}
  onChange={(value) => survey.answer('mood', value)}
/>

Controlled value

const [rating, setRating] = useState<number | null>(null);

<QuestionRating
  id="score"
  label="Rate this feature"
  min={1}
  max={5}
  value={rating}
  onChange={setRating}
/>

Props

Prop

Type

Variants

QuestionRating uses ratingOptionVariants from CVA:

Variant	Values	Default
`size`	`'sm'` `'md'` `'lg'`	`'md'`
`style`	`'numeric'` `'stars'` `'emoji'`	`'numeric'`
`selected`	`true` `false`	`false`

Import ratingOptionVariants to style custom rating buttons:

import { ratingOptionVariants } from '@tour-kit/surveys';

const cls = ratingOptionVariants({ size: 'lg', style: 'stars', selected: true });

Accessibility

Container: role="radiogroup", aria-label={label}, aria-required
Each option: role="radio", aria-checked, aria-label (screen-reader text), tabIndex managed via roving tabindex
Arrow keys navigate between options; Space and Enter select the focused option
Home / End jump to first and last option

QuestionRating

On this page