Configure Screens
Every question has a screen configuration that controls what the user sees. This guide covers all the screen options available in Strapi.
Core screen fields
Section titled “Core screen fields”These fields are available on every question type:
| Field | Purpose | Example |
|---|---|---|
| screen.question | Main title/heading of the screen | “When would you like coverage to start?” |
| screen.description | Subtitle text below the title | “Coverage can begin as soon as tomorrow.” |
| screen.header | Overrides the header area | Custom header text |
| screen.icon | Icon displayed above the title | Select from available icons |
| screen.buttonText | Overrides the default “Continue” button label | “Get my quote” |
Additional info box
Section titled “Additional info box”The screen.additionalInfo field adds an expandable information box below the question:
| Field | Purpose |
|---|---|
| additionalInfo.title | Clickable header text |
| additionalInfo.description | Expanded content (supports basic formatting) |
Use this for supplementary context that not every user needs — for example, explaining why you are asking for a date of birth or what happens with their data.
Skip button
Section titled “Skip button”The screen.skipDetails field adds a “Skip” option alongside the main action:
| Field | Purpose |
|---|---|
| skipDetails.text | Label for the skip link (e.g., “I’ll do this later”) |
| skipDetails.questionId | Where to navigate when skipped |
Only use skip on non-required questions. Skipping stores no answer for that question.
Layout options
Section titled “Layout options”The layout field controls the overall screen structure:
| Layout | Behavior | Use for |
|---|---|---|
| Centered (default) | Standard question layout with progress bar, back button, centered content | Most questions |
| Standalone | Full-screen layout with no chrome (no progress bar, no back button) | Blockers, success screens, intros with custom design |
Examples
Section titled “Examples”Standard question screen
Section titled “Standard question screen”- screen.question: “What is your date of birth?”
- screen.description: “We need this to calculate your premium.”
- screen.additionalInfo.title: “Why do we need this?”
- screen.additionalInfo.description: “Your age affects the insurance premium…”
- layout: Centered (default)
Blocker screen
Section titled “Blocker screen”- screen.question: “We’re sorry, we can’t offer coverage”
- screen.description: “Based on your answers, this product is not available.”
- layout: Standalone
Custom CTA screen
Section titled “Custom CTA screen”- screen.question: “Ready to see your options?”
- screen.buttonText: “Show me plans”
- layout: Centered
See also
Section titled “See also”- Screen Properties Reference – complete specification of all screen fields including code-only properties
- Screen Component – how the Screen component renders layouts
- Your First Questionnaire – hands-on practice configuring screens