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: Event): void {
const detail = (event as CustomEvent).detail;
this.selectedValue = detail.value;
}<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