Skip to content
Birdhouse

Component Overview

Every question in a Birdhouse questionnaire renders as a component. When a user navigates through a questionnaire, each step displays a component chosen by the question’s type field in Strapi.

These components are split across two layers:

  1. Core (qnr-framework) — The open-source rendering library. Provides basic form inputs (radio, checkbox, date, address, etc.) and flow screens (blocker, success, redirect, intro).
  2. App-extended — Components added by Feather’s React app on top of qnr-framework. These handle business-specific functionality: Quote Page V2 (CMS-driven pricing), GenericCheckout (Stripe payments), Processing states, Email, Review, and more.

How the layers work together

Section titled “How the layers work together”

The qnr-framework defines a component registry — a mapping from question type strings to React components. The Feather app’s SignupQuestionnaire wrapper extends this registry with additional entries for app-specific types.

When a question is rendered:

  1. The framework looks up the question’s type in the registry
  2. If a match is found in the app-extended registry, that component renders
  3. Otherwise, it falls back to the core qnr-framework component

Core components handle universal form patterns. App-extended components handle Feather-specific concerns: pricing engines, Stripe integration, policy creation, file uploads to GCS, and vehicle lookups.

Strapi question type to component mapping

Section titled “Strapi question type to component mapping”

The table below shows every question type you can select in Strapi, which component it renders, and which layer owns it.

Layer key:

  • Core — Provided by qnr-framework. Configuration is generic and portable.
  • Core (extended) — Base component from qnr-framework, but the app overrides or wraps it with additional behavior (e.g., Google Maps for ADDRESS, enhanced validation for DATE).
  • App — Provided entirely by the Feather app. Not part of qnr-framework.
Strapi Type Component Layer
ADDRESS AddressForm Core (extended in app with Google Maps)
AUTOSUGGEST AutoSuggestForm Core
AUTOSUGGEST_MULTI AutoSuggestMultiSelectForm App
BOOLEAN BooleanForm Core (extended in app)
BLOCKER Blocker Core
CHECKBOX CheckboxForm Core
COUNTRY_MULTI CountryMultiForm Core
COUNTRY_SINGLE CountrySingleForm Core
CURRENCY CurrencyInputForm Core
CUSTOM_BOX CustomBox App
CUSTOM_INTRO CustomIntro App
DATE DateForm Core (extended in app)
DOWNLOAD Download App
DROPDOWN_SINGLE DropdownSingleForm Core (extended in app)
IBAN IbanForm Core
INPUT ValidatedInputForm Core (extended in app with validation)
INTRO IntroForm Core
NAME NameForm Core (extended in app)
NUMBER NumberInputForm Core
NUMERIC_CONVERSION NumericConversionInputForm Core
PHONE PhoneForm Core
RADIO RadioForm Core
SIGNATURE SignatureForm Core
SIGNATURE_UPLOAD SignatureUpload App
SUCCESS Success Core
REDIRECT Redirect Core
TEXT TextForm Core
ADD_TO_CART AddToCart App
CAR_LOOKUP CarLookup App
CAR_LOOKUP_SPAIN CarLookupSpain App
CANCELLATION_REVIEW CancellationReview App
CANCEL_POLICY_PROCESSING CancelPolicyProcessing App
CLAIM_PROCESSING ClaimProcessing App
COVERED_GROUP CoveredGroup App
EFFECTIVE_DATE_DROPDOWN EffectiveDateDropdown App
EMAIL Email App
EMAIL_BASIC EmailBasic App
GENERIC_CHECKOUT_V2 GenericCheckout App
GENERIC_SUBMISSION GenericSubmission App
HAS_POLICY HasPolicy App
MULTI_NUMBER_INPUT MultiNumberInput App
MULTI_UPLOAD MultiUpload App
PROCESSING Processing App
QUOTE QuotePage (legacy alias for QUOTEPAGE) App
QUOTEPAGE QuotePage App
QUOTE_CUSTOM QuoteCustom App
REVIEW Review App
TALLY Tally App
UPLOAD UploadDocuments App
Section titled “What to read next”

See also

Section titled “See also”