# QuestionnaireHeader

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

The header components provide title display and progress tracking for questionnaire forms. These components work together to create informative headers that guide users through multi-page questionnaires with clear navigation context.

## Overview [#overview]

The header component system consists of a main container and specialized sub-components for displaying questionnaire titles and progress information. Components accept host styling and view/text props; the integrating app supplies the accessibility semantics required by its experience.

## Components [#components]

- **[QuestionnaireHeader.Title](/native-sdk/guide/components/questionnaire-response-form/header/title/)** - Displays questionnaire title with customizable styling
- **[QuestionnaireHeader.Subtitle](/native-sdk/guide/components/questionnaire-response-form/header/subtitle/)** - Shows progress information and custom subtitle text

## Features [#features]

- **📋 Title Display**: Automatic questionnaire title rendering with fallback support
- **📊 Progress Tracking**: Real-time progress information for multi-page questionnaires
- **🎨 Customizable**: Full styling control with theme integration
- **Accessibility boundary**: Forward supported props and add heading semantics in
  the host app when the header is used as a navigational landmark
- **📱 Responsive**: Adapts to different screen sizes and orientations

## Quick Start [#quick-start]

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

const questionnaire: Questionnaire = {
  resourceType: "Questionnaire",
  status: "draft",
  title: "Basic Header",
  item: [],
};

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).

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

The header components use the following theme values by default:

- `theme.colors.surface` - Header background color
- `theme.spacing()` - Consistent spacing throughout header components