Back to all examples

Group related questions together on a question page

const [addressLine1, setAddressLine1] = useState("");
  const [addressLine2, setAddressLine2] = useState("");
  const [townCity, setTownCity] = useState("");
  const [province, setProvince] = useState("");
  const [postalCode, setPostalCode] = useState("");
<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
        Back
      </GoabxLink>

      <GoabText as="h2" mt="xl" mb="m">Your address</GoabText>
      <GoabText mt="none" mb="xl">This is the home address of the person applying</GoabText>

      <GoabxFormItem label="Address line 1">
        <GoabxInput
          onChange={(event) => setAddressLine1(event.value)}
          value={addressLine1}
          name="address-line-1"
          ariaLabel="Address line 1"
          width="100%"
        />
      </GoabxFormItem>

      <GoabxFormItem label="Address line 2" mt="l">
        <GoabxInput
          onChange={(event) => setAddressLine2(event.value)}
          value={addressLine2}
          name="address-line-2"
          ariaLabel="Address line 2"
          width="100%"
        />
      </GoabxFormItem>

      <GoabxFormItem label="Town or city" mt="l">
        <GoabxInput
          onChange={(event) => setTownCity(event.value)}
          value={townCity}
          name="town-city"
          ariaLabel="Town or city name"
          width="460px"
        />
      </GoabxFormItem>

      <GoabxFormItem label="Province or territory" mt="l" id="provinceLabel">
        <GoabxDropdown
          onChange={(event) => setProvince(event.value ?? "")}
          value={province}
          name="province-territory"
          ariaLabelledBy="provinceLabel"
        >
          <GoabxDropdownItem value="AB" label="Alberta" />
          <GoabxDropdownItem value="BC" label="British Columbia" />
          <GoabxDropdownItem value="MB" label="Manitoba" />
          <GoabxDropdownItem value="NB" label="New Brunswick" />
          <GoabxDropdownItem value="NL" label="Newfoundland and Labrador" />
          <GoabxDropdownItem value="NS" label="Nova Scotia" />
          <GoabxDropdownItem value="ON" label="Ontario" />
          <GoabxDropdownItem value="PE" label="Prince Edward Island" />
          <GoabxDropdownItem value="QC" label="Quebec" />
          <GoabxDropdownItem value="SK" label="Saskatchewan" />
          <GoabxDropdownItem value="NT" label="Northwest Territories" />
          <GoabxDropdownItem value="NU" label="Nunavut" />
          <GoabxDropdownItem value="YT" label="Yukon" />
        </GoabxDropdown>
      </GoabxFormItem>

      <GoabxFormItem label="Postal code" mt="l">
        <GoabxInput
          onChange={(event) => setPostalCode(event.value)}
          value={postalCode}
          name="postal-code"
          width="105px"
        />
      </GoabxFormItem>

      <GoabxButton type="submit" mt="2xl">
        Save and continue
      </GoabxButton>
addressLine1 = "";
  addressLine2 = "";
  townCity = "";
  province = "";
  postalCode = "";

  onAddressLine1Change(value: string): void {
    this.addressLine1 = value;
  }

  onAddressLine2Change(value: string): void {
    this.addressLine2 = value;
  }

  onTownCityChange(value: string): void {
    this.townCity = value;
  }

  onProvinceChange(value: string): void {
    this.province = value;
  }

  onPostalCodeChange(value: string): void {
    this.postalCode = value;
  }

  onSubmit(): void {
    console.log("Form submitted");
  }
<goabx-link leadingIcon="arrow-back" size="small" mb="none">
  Back
</goabx-link>

<goab-text as="h2" mt="xl" mb="m">Your address</goab-text>
<goab-text mt="none" mb="xl">This is the home address of the person applying</goab-text>

<goabx-form-item label="Address line 1">
  <goabx-input
    (onChange)="onAddressLine1Change($event)"
    [value]="addressLine1"
    name="address-line-1"
    ariaLabel="Address line 1"
    width="100%">
  </goabx-input>
</goabx-form-item>

<goabx-form-item label="Address line 2" mt="l">
  <goabx-input
    (onChange)="onAddressLine2Change($event)"
    [value]="addressLine2"
    name="address-line-2"
    ariaLabel="Address line 2"
    width="100%">
  </goabx-input>
</goabx-form-item>

<goabx-form-item label="Town or city" mt="l">
  <goabx-input
    (onChange)="onTownCityChange($event)"
    [value]="townCity"
    name="town-city"
    ariaLabel="Town or city name"
    width="460px">
  </goabx-input>
</goabx-form-item>

<goabx-form-item label="Province or territory" mt="l" id="provinceLabel">
  <goabx-dropdown
    (onChange)="onProvinceChange($event)"
    [value]="province"
    name="province-territory"
    ariaLabelledBy="provinceLabel">
    <goabx-dropdown-item value="AB" label="Alberta"></goabx-dropdown-item>
    <goabx-dropdown-item value="BC" label="British Columbia"></goabx-dropdown-item>
    <goabx-dropdown-item value="MB" label="Manitoba"></goabx-dropdown-item>
    <goabx-dropdown-item value="NB" label="New Brunswick"></goabx-dropdown-item>
    <goabx-dropdown-item value="NL" label="Newfoundland and Labrador"></goabx-dropdown-item>
    <goabx-dropdown-item value="NS" label="Nova Scotia"></goabx-dropdown-item>
    <goabx-dropdown-item value="ON" label="Ontario"></goabx-dropdown-item>
    <goabx-dropdown-item value="PE" label="Prince Edward Island"></goabx-dropdown-item>
    <goabx-dropdown-item value="QC" label="Quebec"></goabx-dropdown-item>
    <goabx-dropdown-item value="SK" label="Saskatchewan"></goabx-dropdown-item>
    <goabx-dropdown-item value="NT" label="Northwest Territories"></goabx-dropdown-item>
    <goabx-dropdown-item value="NU" label="Nunavut"></goabx-dropdown-item>
    <goabx-dropdown-item value="YT" label="Yukon"></goabx-dropdown-item>
  </goabx-dropdown>
</goabx-form-item>

<goabx-form-item label="Postal code" mt="l">
  <goabx-input
    (onChange)="onPostalCodeChange($event)"
    [value]="postalCode"
    name="postal-code"
    width="105px">
  </goabx-input>
</goabx-form-item>

<goabx-button type="submit" mt="2xl" (onClick)="onSubmit()">
  Save and continue
</goabx-button>
document.getElementById("address-line-1").addEventListener("_change", (e) => {
  console.log("Address line 1:", e.detail.value);
});

document.getElementById("province-territory").addEventListener("_change", (e) => {
  console.log("Province:", e.detail.value);
});

document.getElementById("submit-btn").addEventListener("_click", () => {
  console.log("Form submitted");
});
<goa-link leadingicon="arrow-back" size="small" mb="none">
  Back
</goa-link>

<goa-text as="h2" mt="xl" mb="m">Your address</goa-text>
<goa-text mt="none" mb="xl">This is the home address of the person applying</goa-text>

<goa-form-item version="2" label="Address line 1">
  <goa-input version="2"
    id="address-line-1"
    name="address-line-1"
    aria-label="Address line 1"
    width="100%">
  </goa-input>
</goa-form-item>

<goa-form-item version="2" label="Address line 2" mt="l">
  <goa-input version="2"
    id="address-line-2"
    name="address-line-2"
    aria-label="Address line 2"
    width="100%">
  </goa-input>
</goa-form-item>

<goa-form-item version="2" label="Town or city" mt="l">
  <goa-input version="2"
    id="town-city"
    name="town-city"
    aria-label="Town or city name"
    width="460px">
  </goa-input>
</goa-form-item>

<goa-form-item version="2" label="Province or territory" mt="l" id="provinceLabel">
  <goa-dropdown version="2"
    id="province-territory"
    name="province-territory"
    aria-labelledby="provinceLabel">
    <goa-dropdown-item value="AB" label="Alberta"></goa-dropdown-item>
    <goa-dropdown-item value="BC" label="British Columbia"></goa-dropdown-item>
    <goa-dropdown-item value="MB" label="Manitoba"></goa-dropdown-item>
    <goa-dropdown-item value="NB" label="New Brunswick"></goa-dropdown-item>
    <goa-dropdown-item value="NL" label="Newfoundland and Labrador"></goa-dropdown-item>
    <goa-dropdown-item value="NS" label="Nova Scotia"></goa-dropdown-item>
    <goa-dropdown-item value="ON" label="Ontario"></goa-dropdown-item>
    <goa-dropdown-item value="PE" label="Prince Edward Island"></goa-dropdown-item>
    <goa-dropdown-item value="QC" label="Quebec"></goa-dropdown-item>
    <goa-dropdown-item value="SK" label="Saskatchewan"></goa-dropdown-item>
    <goa-dropdown-item value="NT" label="Northwest Territories"></goa-dropdown-item>
    <goa-dropdown-item value="NU" label="Nunavut"></goa-dropdown-item>
    <goa-dropdown-item value="YT" label="Yukon"></goa-dropdown-item>
  </goa-dropdown>
</goa-form-item>

<goa-form-item version="2" label="Postal code" mt="l">
  <goa-input version="2"
    id="postal-code"
    name="postal-code"
    width="105px">
  </goa-input>
</goa-form-item>

<goa-button version="2" type="submit" mt="2xl" id="submit-btn">
  Save and continue
</goa-button>

Group related form fields together on a single page to collect address information from users, making it easier to complete logically connected questions at once.

When to use

Use this pattern when:

  • Collecting address or contact information
  • Form fields are logically related and should be completed together
  • Users need context between related fields
  • Following a question page pattern in a multi-step form

Considerations

  • Use clear, descriptive labels for each form field
  • Include a back link for navigation in multi-step forms
  • Consider adding a section title and subtitle to provide context
  • Use appropriate input widths based on expected content length