QuestionnaireHeader.Subtitle

Displays progress information and subtitle text with customizable prefix and formatting.

Overview

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 Example

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;

Props

Props

Prop	Type	Default	Description
prefix	string	-	Text to display before page/step information
style	StyleProp<TextStyle>	-	Custom styling for the subtitle text
children	React.ReactNode	-	Custom subtitle content override

Features

• 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

Styling

Theme Colors

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

Localization

The component uses these translation keys:

{
  "questionnaire": {
    "questionnaire-form": "{current} of {total}"
  }
}