QuestionnaireHeader

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.

OverviewCopy Anchor Link

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.

ComponentsCopy Anchor Link

• QuestionnaireHeader.Title - Displays questionnaire title with customizable styling
• QuestionnaireHeader.Subtitle - Shows progress information and custom subtitle text

FeaturesCopy Anchor Link

• 📋 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 StartCopy Anchor Link

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;

PropsCopy Anchor Link

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

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

The header components use the following theme values by default:

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