QuestionnaireHeader.Title

Displays the questionnaire title with automatic fallback and customizable styling.

Overview

The QuestionnaireHeader.Title component automatically displays the questionnaire title from the form context or allows for custom title override. It integrates seamlessly with the theme system and provides proper accessibility support.

Basic Example

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

Prop	Type	Default	Description
variant	string	'headlineMedium'	Typography variant to use
style	StyleProp<TextStyle>	undefined	Custom styles for the title
...textProps	TextProps	-	All other Text props (accessibility, testID, etc.)

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: Proper heading semantics and screen reader support
• Responsive: Typography scales appropriately across devices

Styling

Theme Variables Used

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