Ask a user one question at a time
<GoabLink leadingIcon="arrow-back" size="small">
<a href="#">Back</a>
</GoabLink>
<GoabFormItem
mt="xl"
label="Are you currently in school?"
labelSize="large"
helpText="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education."
>
<GoabRadioGroup
name="school"
ariaLabel="are you currently in school?"
onChange={() => {}}
>
<GoabRadioItem value="yes" label="Yes" />
<GoabRadioItem value="no" label="No" />
</GoabRadioGroup>
</GoabFormItem>
<GoabButton type="submit" mt="2xl">
Save and continue
</GoabButton>selectedValue = "";
onSchoolChange(event: GoabRadioGroupOnChangeDetail): void {
this.selectedValue = event.value as string;
}<goab-link leadingIcon="arrow-back" size="small">
<a href="#">Back</a>
</goab-link>
<goab-form-item
mt="xl"
label="Are you currently in school?"
labelSize="large"
helpText="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education."
>
<goab-radio-group
name="school"
ariaLabel="are you currently in school?"
(onChange)="onSchoolChange($event)"
>
<goab-radio-item value="yes" label="Yes"></goab-radio-item>
<goab-radio-item value="no" label="No"></goab-radio-item>
</goab-radio-group>
</goab-form-item>
<goab-button type="submit" mt="2xl"> Save and continue </goab-button>document.querySelector("goa-radio-group").addEventListener("_change", (e) => {
console.log("Selected:", e.detail.value);
});<goa-link leadingicon="arrow-back" size="small">
<a href="#">Back</a>
</goa-link>
<goa-form-item
version="2"
mt="xl"
label="Are you currently in school?"
labelsize="large"
helptext="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education."
>
<goa-radio-group version="2" name="school" aria-label="are you currently in school?">
<goa-radio-item value="yes" label="Yes"></goa-radio-item>
<goa-radio-item value="no" label="No"></goa-radio-item>
</goa-radio-group>
</goa-form-item>
<goa-button version="2" type="submit" mt="2xl"> Save and continue </goa-button>Ask a user one question at a time.
When to use
Use this pattern when:
- Building a public-facing form for citizens
- You want to reduce cognitive load by focusing on one question
- The question requires careful consideration from the user
- Following the one-question-per-page pattern for government services
Considerations
- Include a back link to allow users to navigate to previous questions
- Use a large label size to make the question prominent
- Provide help text when the question may need clarification
- Use a clear call-to-action button to progress