QuestionnaireHeader.Subtitle

Displays progress information using an app-owned i18next translation key and formatting.

OverviewCopy Anchor Link

The QuestionnaireHeader.Subtitle component automatically displays progress information for questionnaires, showing current page/step information with customizable prefix text. It provides real-time updates as users navigate through the form.

Basic ExampleCopy Anchor Link

import { QuestionnaireForm } from "@ovok/native";
import { Questionnaire } from "@medplum/fhirtypes";

const questionnaire: Questionnaire = {
  resourceType: "Questionnaire",
  status: "draft",
  title: "Basic Header",
  item: [
    {
      linkId: "1",
      text: "What is your name?",
      type: "string",
    },
  ],
};

const BasicHeader = () => {
  return (
    <QuestionnaireForm questionnaire={questionnaire}>
      <QuestionnaireForm.Header>
        <QuestionnaireForm.Header.Title />
        <QuestionnaireForm.Header.Subtitle prefix="Step" />
      </QuestionnaireForm.Header>
    </QuestionnaireForm>
  );
};
export default BasicHeader;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/questionnaire-response-form API reference.

FeaturesCopy Anchor Link

• Automatic Progress Display: Shows current page/step information automatically
• Customizable Prefix: Add custom text before progress information
• Real-time Updates: Updates automatically as user navigates
• Custom Content Override: Replace automatic content with custom text
• Theme Integration: Uses theme colors and typography

StylingCopy Anchor Link

Theme ColorsCopy Anchor Link

• theme.colors.onSurfaceVariant - Default text color
• theme.fonts.bodyMedium - Default typography style

LocalizationCopy Anchor Link

The component uses these translation keys:

{
  "questionnaire-form": {
    "header": {
      "subtitle": "{currentItemNumber} of {totalItems}"
    }
  }
}