# QuestionnaireHeader.Subtitle

Canonical page: https://docs.ovok.com/native-sdk/guide/components/questionnaire-response-form/header/subtitle

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

## Overview [#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 [#basic-example]

```tsx
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]

Every prop, with its type and description, is listed in the [`@ovok/native/questionnaire-response-form` API reference](/native-sdk/reference/questionnaire-response-form).

## Features [#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 [#styling]

### Theme Colors [#theme-colors]

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

## Localization [#localization]

The component uses these translation keys:

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