HeadlessQuestionRating

Headless rating scale — manages value, options array, focusedIndex, and returns pre-built ARIA props via render prop

HeadlessQuestionRating manages the controlled/uncontrolled value toggle, builds the options array, and returns pre-composed ARIA props. You render whatever markup you choose.

Import

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

Usage

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

<HeadlessQuestionRating
  id="nps-score"
  label="How likely are you to recommend us?"
  min={0}
  max={10}
  onChange={(value) => survey.answer('nps-score', value)}
>
  {({ value, options, focusedIndex, setValue, setFocusedIndex, ratingGroupProps, getOptionProps }) => (
    <div {...ratingGroupProps} className="flex flex-wrap gap-1">
      {options.map((opt, index) => {
        const optProps = getOptionProps(opt);
        return (
          <button
            key={opt}
            type="button"
            {...optProps}
            onClick={() => {
              setFocusedIndex(index);
              setValue(opt);
            }}
            onFocus={() => setFocusedIndex(index)}
            className={`w-10 h-10 rounded border ${optProps['aria-checked'] ? 'bg-blue-600 text-white' : 'bg-white'}`}
          >
            {opt}
          </button>
        );
      })}
    </div>
  )}
</HeadlessQuestionRating>

Props

Prop

Type

Render prop shape