Question page
const [answer, setAnswer] = useState("");
const handleContinue = () => {
console.log("Answer submitted:", answer);
};<GoabLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabLink>
<GoabText as="h1" mt="xl" mb="m">What is your email address?</GoabText>
<GoabText mt="none" mb="xl">We'll use this to send you confirmation of your application.</GoabText>
<GoabFormItem label="Email address">
<GoabInput
name="email"
type="email"
value={answer}
onChange={(e) => setAnswer(e.value)}
width="100%"
/>
</GoabFormItem>
<GoabButtonGroup alignment="start" mt="2xl">
<GoabButton type="primary" onClick={handleContinue}>
Continue
</GoabButton>
</GoabButtonGroup>
);
}A question page pattern that presents one question at a time to help users focus, reduce cognitive load, and navigate complex forms more easily.
When to use
Use this pattern when:
- Building multi-step forms or wizards
- Asking users for information that requires focused attention
- The form has branching logic based on user responses
- You want to reduce cognitive load and errors
Considerations
- Each page should contain one idea: one question, one decision, or one piece of information
- Progress indicators are optional - test without one first
- The pattern helps with mobile responsiveness and accessibility
- Enables automatic saving and better error handling
- Consider adaptive questioning where subsequent questions depend on previous answers