# QuestionnaireHeader.Title

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

Displays the questionnaire title with automatic fallback and customizable styling.

## Overview [#overview]

The `QuestionnaireHeader.Title` component automatically displays the questionnaire title from the form context or allows for custom title override. It integrates with the theme system and forwards supported text props so the host app can provide its required accessibility semantics.

## 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", // it will be displayed in the header
  item: [],
};

const BasicHeader = () => {
  return (
    <QuestionnaireForm questionnaire={questionnaire}>
      <QuestionnaireForm.Header>
        <QuestionnaireForm.Header.Title />
      </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 Title Display**: Automatically retrieves and displays the questionnaire title from context
- **Custom Override**: Supports custom title content through children prop
- **Theme Integration**: Uses theme typography and colors automatically
- **Accessibility**: Forward supported text accessibility props from the host app
- **Responsive**: Typography scales appropriately across devices

## Styling [#styling]

### Theme Variables Used [#theme-variables-used]

- `theme.colors.onSurface` - Default text color
- `theme.fonts.headlineSmall` - Default typography style