Skip to content
Birdhouse

Screen

The Screen component is the outermost wrapper for every question in a questionnaire. It is not a question type itself — it is the shell that surrounds the question’s form input. Every question you add in Strapi has a screen component field where you configure how the page looks around the actual input.

Layouts

Section titled “Layouts”

Screen supports two layout modes that fundamentally change how the page is structured.

Centered layout

Section titled “Centered layout”

The default. Screen renders a structured page with:

  • Question title at the top
  • Description below the title
  • Form input (the actual component) in the center
  • Submit button at the bottom
  • Additional info as a side panel (on desktop) or expandable section (on mobile)

This is the standard layout for most question types: radio, checkbox, date, input, address, name, etc. The Screen handles all the surrounding chrome so the input component only needs to render the form field itself.

Standalone layout

Section titled “Standalone layout”

Screen renders nothing — it gives full control to the child component. The component is responsible for its own title, description, buttons, and layout.

Used by components that need custom page structures:

  • Blocker — full-page stop screen with custom icon and action buttons
  • Success — completion page with info cards and next-step buttons
  • Quote Page V2 — complex pricing page with plans, addons, and coverage tables
  • GenericCheckout — Stripe payment page with order summary

When a component uses standalone layout, the Screen’s title, description, and button text fields in Strapi are ignored.

ProgressWrapper

Section titled “ProgressWrapper”

When the questionnaire’s metadata includes a progressBar configuration, each Screen is wrapped in a ProgressWrapper that displays progress at the top of the page. The progress bar calculates completion based on the current question’s position within its group.

You do not need to configure ProgressWrapper per question — it is applied automatically when the questionnaire-level metadata enables it.

Screen properties

Section titled “Screen properties”

These are the fields available on the screen component in Strapi:

Property Type Description
layout enum Centered or Standalone. Defaults to Centered.
icon string Icon identifier displayed above the question title.
header string Small header text above the question title (used for step labels or section names).
question string The main question title. Displayed prominently at the top of the page.
questionClassName string CSS class applied to the question title for custom styling.
description string Explanatory text below the question title. Supports markdown.
error string Custom error message displayed when validation fails.
loading boolean Shows a loading spinner instead of the form input.
buttonText string Label for the submit/continue button. Defaults to “Continue”.
skipDetails object Configures an optional “Skip” link. Contains skipQuestionId (where to go) and text (link label).
additionalInfo object Side panel content. Contains title and description (markdown supported). Renders as a collapsible panel on mobile.
secondaryAction object A secondary button or link below the primary button.
configuration object Extra configuration passed to the component (component-specific).
noMaxWidth boolean Removes the max-width constraint on the content area. Used for wide layouts.

Visual structure (Centered layout)

Section titled “Visual structure (Centered layout)”
+-----------------------------------------------+
|  [Progress Bar]                                |
+-----------------------------------------------+
|                                                |
|  [Icon]                                        |
|  [Header]                                      |
|  [Question Title]                              |
|  [Description]                                 |
|                                                |
|  +-------------------+  +------------------+   |
|  |                   |  |                  |   |
|  |   Form Input      |  | Additional Info  |   |
|  |   (component)     |  | (side panel)     |   |
|  |                   |  |                  |   |
|  +-------------------+  +------------------+   |
|                                                |
|  [Error Message]                               |
|                                                |
|  [ Continue Button ]                           |
|  [Skip link]                                   |
|  [Secondary action]                            |
|                                                |
+-----------------------------------------------+

Tips for Strapi configuration

Section titled “Tips for Strapi configuration”
  • Most questions only need question (title) and buttonText. The other fields are optional.
  • Use description for explanatory text that helps users understand what is being asked. Markdown formatting (bold, links, lists) is supported.
  • Use additionalInfo for longer explanations, legal disclaimers, or “Why do we ask this?” content that should not clutter the main flow.
  • Set layout to Standalone only if the component explicitly requires it. Most core input components expect Centered layout.

For the full property reference, see Screen Properties.

See also

Section titled “See also”