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
View old example docs