QuestionnaireNavigation

The navigation components provide intuitive flow control for questionnaire forms. These components handle page transitions, form validation, and submission with smart state management and accessibility features.

Overview

The navigation component system consists of a main container and specialized button components for different navigation actions. Components automatically handle validation, conditional navigation, and proper focus management for healthcare questionnaires.

Features

• 🔄 Smart Navigation: Automatic page flow with validation checks
• ✅ Validation Integration: Built-in form validation before navigation
• 📱 State Management: Preserves form state during navigation
• 🔒 Conditional Logic: Respects FHIR enableWhen rules
• ⏳ Loading States: Visual feedback during transitions and submission
• 🎨 Customizable: Complete styling control with theme integration

Basic Example

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

const questionnaire: Questionnaire = {
  resourceType: "Questionnaire",
  status: "draft",
  title: "Basic Navigation",
  item: [
    {
      linkId: "1",
      text: "What is your name?",
      type: "string",
    },
    {
      linkId: "2",
      text: "What is your age?",
      type: "integer",
    },
  ],
};

const BasicNavigation = () => {
  return (
    <QuestionnaireForm questionnaire={questionnaire}>
      <QuestionnaireForm.Navigation>
        <QuestionnaireForm.Navigation.PreviousButton />
        <QuestionnaireForm.Navigation.NextButton />
        <QuestionnaireForm.Navigation.SubmitButton />
      </QuestionnaireForm.Navigation>
    </QuestionnaireForm>
  );
};

export default BasicNavigation;

Components

• QuestionnaireNavigation.PreviousButton - Navigate to previous page with state preservation
• QuestionnaireNavigation.NextButton - Navigate to next page with validation
• QuestionnaireNavigation.SubmitButton - Handle form submission with comprehensive validation

Styling

Theme Colors Used

The navigation components use the following theme values by default:

• theme.colors.surface - Navigation background color
• theme.colors.primary - Primary button background color
• theme.colors.onPrimary - Primary button text color
• theme.colors.outline - Border and outline colors
• theme.colors.error - Error state colors for validation messages
• theme.spacing() - Consistent spacing throughout navigation components
• theme.borderRadius() - Consistent border radius for buttons