SurveyProgress

Question progress indicator with text, bar, or combined display — uses role="progressbar" and renders null for single-question surveys

SurveyProgress renders a question counter and/or progress bar for multi-step surveys. It returns null when total is 1 or less — no progress indicator is needed for single-question surveys.

Import

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

Usage

import { SurveyProgress, useSurvey } from '@tour-kit/surveys';

function SurveyWithProgress() {
  const survey = useSurvey('multi-step-survey');
  const currentStep = (survey.state?.currentStep ?? 0) + 1;
  const totalSteps = survey.config?.questions.length ?? 1;

  return (
    <div>
      <SurveyProgress
        current={currentStep}
        total={totalSteps}
        mode="both"
      />
      {/* question content */}
    </div>
  );
}

Text only

<SurveyProgress current={2} total={5} mode="text" />
// Renders: "Question 2 of 5"

Bar only

<SurveyProgress current={3} total={5} mode="bar" size="sm" />

Custom label template

<SurveyProgress
  current={2}
  total={4}
  labelTemplate="Step {current} / {total}"
/>
// Renders: "Step 2 / 4"

Props

Prop

Type

Variants

SurveyProgress uses progressBarVariants from CVA for the filled bar:

Variant	Values	Default
`size`	`'sm'` `'md'` `'lg'`	`'md'`

Bar heights: sm → h-1, md → h-2, lg → h-3.

Accessibility

Progress bar: role="progressbar", aria-valuenow={current}, aria-valuemin={1}, aria-valuemax={total}, aria-label="Survey progress"
Text label: rendered in a <span aria-live="polite"> so screen readers announce step changes

useSurvey — Read currentStep from survey state
SurveyModal — Compose SurveyProgress inside display components

SurveyProgress

On this page