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("");

<GoabLink leadingIcon="arrow-back" size="small" mb="none">
  Back
</GoabLink>

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

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

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

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

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

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

<GoabButton type="submit" mt="2xl">
  Save and continue
</GoabButton>

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");
}

<goab-link leadingIcon="arrow-back" size="small" mb="none"> Back </goab-link>

<goab-text tag="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>

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

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

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

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

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

<goab-button type="submit" mt="2xl" (onClick)="onSubmit()">
  Save and continue
</goab-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

View old example docs