Question page
const [answer, setAnswer] = useState("");
const handleContinue = () => {
console.log("Answer submitted:", answer);
};<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabxLink>
<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>
<GoabxFormItem label="Email address">
<GoabxInput
name="email"
type="email"
value={answer}
onChange={(e) => setAnswer(e.value)}
width="100%"
/>
</GoabxFormItem>
<GoabButtonGroup alignment="start" mt="2xl">
<GoabxButton type="primary" onClick={handleContinue}>
Continue
</GoabxButton>
</GoabButtonGroup>
);
}answer = "";
onAnswerChange(event: { value: string }): void {
this.answer = event.value;
}
handleContinue(): void {
console.log("Answer submitted:", this.answer);
}<goabx-link leadingIcon="arrow-back" size="small" mb="none">
Back
</goabx-link>
<goab-text as="h1" mt="xl" mb="m">What is your email address?</goab-text>
<goab-text mt="none" mb="xl">We'll use this to send you confirmation of your application.</goab-text>
<goabx-form-item label="Email address">
<goabx-input
name="email"
type="email"
[value]="answer"
(onChange)="onAnswerChange($event)"
width="100%">
</goabx-input>
</goabx-form-item>
<goab-button-group alignment="start" mt="2xl">
<goabx-button type="primary" (onClick)="handleContinue()">
Continue
</goabx-button>
</goab-button-group>const emailInput = document.getElementById("email-input");
const continueBtn = document.getElementById("continue-btn");
let answer = "";
emailInput.addEventListener("_change", (e) => {
answer = e.detail.value;
});
continueBtn.addEventListener("_click", () => {
console.log("Answer submitted:", answer);
});<goa-link leadingicon="arrow-back" size="small" mb="none">
Back
</goa-link>
<goa-text as="h1" mt="xl" mb="m">What is your email address?</goa-text>
<goa-text mt="none" mb="xl">We'll use this to send you confirmation of your application.</goa-text>
<goa-form-item version="2" label="Email address">
<goa-input version="2"
id="email-input"
name="email"
type="email"
width="100%">
</goa-input>
</goa-form-item>
<goa-button-group alignment="start" mt="2xl">
<goa-button version="2" id="continue-btn" type="primary">
Continue
</goa-button>
</goa-button-group>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