QuestionnaireHeader.Title

Displays the questionnaire title with automatic fallback and customizable styling.

OverviewCopy Anchor Link

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 ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/questionnaire-response-form API reference.

FeaturesCopy Anchor Link

• 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

StylingCopy Anchor Link

Theme Variables UsedCopy Anchor Link

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