Dropdown

Present a list of options to the user to select from.

Props

name

string

Identifier for the dropdown. Should be unique.

ariaLabel

string

Defines how the selected value will be translated for the screen reader. If not specified it will fall back to the name.

ariaLabelledBy

string

The aria-labelledby attribute identifies the element(or elements) that labels the dropdown it is applied to. Normally it is the id of the label.

value

string | undefined

Stores the value of the item selected from the dropdown.

filterable

boolean

When true the dropdown will have the ability to filter options by typing into the input field.

Defaults to false.

leadingIcon

GoAIconType

Icon shown to the left of the dropdown input.

maxHeight

string

Maximum height of the dropdown menu. Non-native only.

Defaults to 276px.

placeholder

string

The text displayed for the dropdown before a selection is made. Non-native only.

width

string

Overrides the autosized menu width. Non-native only.

maxWidth

string

Sets the maximum width of the dropdown. Use a CSS unit (px, %, ch, rem, em).

disabled

boolean

Disable this control.

Defaults to false.

error

boolean

Show an error state.

Defaults to false.

native

boolean

When true will render the native select HTML element.

Defaults to false.

size

default | compact

Sets the size of the dropdown. Compact reduces height for dense layouts.

Defaults to default.

relative

string

This property has no effect and will be removed in a future version.

autoComplete

string

Specifies the autocomplete attribute for the dropdown input. Native only.

testId

string

Sets a data-testid attribute for automated testing.

disableGlobalClosePopover

boolean

Prevents the popover from closing when clicking outside. Used for nested dropdowns or complex interactions.

Defaults to false.

mt, mr, mb, ml

none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Apply margin to the top, right, bottom, and/or left of the component.

Events

onChange

(event: Event) => void

_change

CustomEvent

Examples

Add a record using a drawer

const [open, setOpen] = useState(false);

<GoabxButton leadingIcon="add" onClick={() => setOpen(true)}>
        Add Record
      </GoabxButton>
      <GoabxDrawer
        maxSize="492px"
        open={open}
        heading="Add Record"
        position="right"
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup>
            <GoabxButton type="primary" size="compact" onClick={() => setOpen(false)}>
              Add record
            </GoabxButton>
            <GoabxButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
              Cancel
            </GoabxButton>
          </GoabButtonGroup>
        }
      >
        <GoabxFormItem label="Level of education">
          <GoabxDropdown onChange={() => {}} name="education" value="university">
            <GoabxDropdownItem value="high-school" label="High School Diploma" />
            <GoabxDropdownItem value="college" label="College Diploma" />
            <GoabxDropdownItem value="university" label="University Degree" />
            <GoabxDropdownItem value="masters" label="Master's Degree" />
            <GoabxDropdownItem value="doctorate" label="Doctorate" />
          </GoabxDropdown>
        </GoabxFormItem>
        <GoabxFormItem label="Educational institution" mt="l">
          <GoabxInput name="education" type="text" onChange={() => {}} />
        </GoabxFormItem>
        <GoabxFormItem label="Field of study" requirement="optional" mt="l">
          <GoabxInput name="fieldOfStudy" type="text" onChange={() => {}} />
        </GoabxFormItem>
        <GoabxFormItem label="Is the person currently attending?" mt="l">
          <GoabxRadioGroup name="attendTraining" orientation="horizontal" onChange={() => {}}>
            <GoabxRadioItem value="yes" label="Yes" />
            <GoabxRadioItem value="no" label="No" />
          </GoabxRadioGroup>
        </GoabxFormItem>
        <GoabxFormItem label="Start date" mt="l">
          <GoabxDatePicker onChange={() => {}} value={new Date("2022-09-01")} />
          <GoabxCheckbox name="startDateApproximate" text="Approximate date" value="y" mt="s" />
        </GoabxFormItem>
        <GoabxFormItem label="Credential received?" mt="l">
          <GoabxRadioGroup name="credentialReceived" orientation="horizontal" onChange={() => {}}>
            <GoabxRadioItem value="yes" label="Yes" />
            <GoabxRadioItem value="no" label="No" />
          </GoabxRadioGroup>
        </GoabxFormItem>
      </GoabxDrawer>

open = false;

  onClick() {
    this.open = true;
  }

  onClose() {
    this.open = false;
  }

  dropdownOnChange(event: any) {
    console.log(event);
  }

  inputOnChange(event: any) {
    console.log(event);
  }

  radioOnChange(event: any) {
    console.log(event);
  }

  dateOnChange(event: any) {
    console.log(event);
  }

  closeDrawer() {
    this.open = false;
  }

<goabx-button leadingIcon="add" (onClick)="onClick()">Add Record</goabx-button>
<goabx-drawer maxSize="492px" [open]="open" heading="Add Record" position="right" (onClose)="onClose()" [actions]="actions">
  <goabx-form-item label="Level of education">
    <goabx-dropdown (onChange)="dropdownOnChange($event)" name="education" value="university">
      <goabx-dropdown-item value="high-school" label="High School Diploma"></goabx-dropdown-item>
      <goabx-dropdown-item value="college" label="College Diploma"></goabx-dropdown-item>
      <goabx-dropdown-item value="university" label="University Degree"></goabx-dropdown-item>
      <goabx-dropdown-item value="masters" label="Master's Degree"></goabx-dropdown-item>
      <goabx-dropdown-item value="doctorate" label="Doctorate"></goabx-dropdown-item>
    </goabx-dropdown>
  </goabx-form-item>
  <goabx-form-item label="Educational institution" mt="l">
    <goabx-input name="education" type="text" (onChange)="inputOnChange($event)"></goabx-input>
  </goabx-form-item>
  <goabx-form-item label="Field of study" requirement="optional" mt="l">
    <goabx-input name="fieldOfStudy" type="text" (onChange)="inputOnChange($event)"></goabx-input>
  </goabx-form-item>
  <goabx-form-item label="Is the person currently attending?" mt="l">
    <goabx-radio-group name="attendTraining" orientation="horizontal" (onChange)="radioOnChange($event)">
      <goabx-radio-item value="yes" label="Yes"></goabx-radio-item>
      <goabx-radio-item value="no" label="No"></goabx-radio-item>
    </goabx-radio-group>
  </goabx-form-item>
  <goabx-form-item label="Start date" mt="l">
    <goabx-date-picker (onChange)="dateOnChange($event)"></goabx-date-picker>
    <goabx-checkbox name="startDateApproximate" text="Approximate date" value="y" mt="s"></goabx-checkbox>
  </goabx-form-item>
  <goabx-form-item label="Credential received?" mt="l">
    <goabx-radio-group name="credentialReceived" orientation="horizontal" (onChange)="radioOnChange($event)">
      <goabx-radio-item value="yes" label="Yes"></goabx-radio-item>
      <goabx-radio-item value="no" label="No"></goabx-radio-item>
    </goabx-radio-group>
  </goabx-form-item>
  <ng-template #actions>
    <goab-button-group>
      <goabx-button type="primary" size="compact" (onClick)="closeDrawer()">Add record</goabx-button>
      <goabx-button type="tertiary" size="compact" (onClick)="closeDrawer()">Cancel</goabx-button>
    </goab-button-group>
  </ng-template>
</goabx-drawer>

const drawer = document.getElementById("record-drawer");
const openBtn = document.getElementById("open-drawer-btn");
const addBtn = document.getElementById("add-record-btn");
const cancelBtn = document.getElementById("cancel-btn");

openBtn.addEventListener("_click", () => {
  drawer.setAttribute("open", "true");
});

drawer.addEventListener("_close", () => {
  drawer.removeAttribute("open");
});

addBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

<goa-button version="2" id="open-drawer-btn" leadingicon="add">Add Record</goa-button>
<goa-drawer version="2" id="record-drawer" max-size="492px" heading="Add Record" position="right">
  <goa-form-item version="2" label="Level of education">
    <goa-dropdown version="2" name="education" value="university">
      <goa-dropdown-item value="high-school" label="High School Diploma"></goa-dropdown-item>
      <goa-dropdown-item value="college" label="College Diploma"></goa-dropdown-item>
      <goa-dropdown-item value="university" label="University Degree"></goa-dropdown-item>
      <goa-dropdown-item value="masters" label="Master's Degree"></goa-dropdown-item>
      <goa-dropdown-item value="doctorate" label="Doctorate"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Educational institution" mt="l">
    <goa-input version="2" name="education" type="text"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Field of study" requirement="optional" mt="l">
    <goa-input version="2" name="fieldOfStudy" type="text"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Is the person currently attending?" mt="l">
    <goa-radio-group version="2" name="attendTraining" orientation="horizontal">
      <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-form-item version="2" label="Start date" mt="l">
    <goa-date-picker version="2"></goa-date-picker>
    <goa-checkbox version="2" name="startDateApproximate" text="Approximate date" value="y" mt="s"></goa-checkbox>
  </goa-form-item>
  <goa-form-item version="2" label="Credential received?" mt="l">
    <goa-radio-group version="2" name="credentialReceived" orientation="horizontal">
      <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>
  <div slot="actions">
    <goa-button-group>
      <goa-button version="2" id="add-record-btn" type="primary" size="compact">Add record</goa-button>
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
    </goa-button-group>
  </div>
</goa-drawer>

Add and edit lots of filters

const [open, setOpen] = useState(false);

<GoabxButton onClick={() => setOpen(true)}>Filters</GoabxButton>
      <GoabxDrawer
          heading="Filters"
          open={open}
          onClose={() => setOpen(false)}
          position="right"
          actions={
            <GoabButtonGroup>
              <GoabxButton type="primary" size="compact" onClick={() => setOpen(false)}>
                Apply filters
              </GoabxButton>
              <GoabxButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
                Cancel
              </GoabxButton>
            </GoabButtonGroup>
          }
        >
          <GoabxFormItem label="Entry status">
            <GoabCheckboxList name="entryStatus" onChange={() => {}}>
              <GoabxCheckbox name="draft" text="Draft" value="draft" />
              <GoabxCheckbox name="published" text="Published" value="published" />
            </GoabCheckboxList>
          </GoabxFormItem>
          <GoabxFormItem label="Assigned to - Region" mt="l">
            <GoabCheckboxList name="region" onChange={() => {}}>
              <GoabxCheckbox name="calgary" text="Calgary" value="calgary" />
              <GoabxCheckbox name="central" text="Central" value="central" />
              <GoabxCheckbox name="edmonton" text="Edmonton" value="edmonton" />
              <GoabxCheckbox name="north" text="North" value="north" />
              <GoabxCheckbox name="south" text="South" value="south" />
            </GoabCheckboxList>
          </GoabxFormItem>
          <GoabxFormItem label="Assigned to" mt="l">
            <GoabxDropdown name="assignedTo" onChange={() => {}}>
              <GoabxDropdownItem value="1" label="Person 1" />
              <GoabxDropdownItem value="2" label="Person 2" />
            </GoabxDropdown>
          </GoabxFormItem>
          <GoabxFormItem label="Date taken" mt="l">
            <GoabxRadioGroup name="dateTaken" onChange={() => {}}>
              <GoabxRadioItem value="24" label="Last 24 hours" />
              <GoabxRadioItem value="72" label="Last 72 hours" />
            </GoabxRadioGroup>
          </GoabxFormItem>
      </GoabxDrawer>

open = false;
  assignedTo = "";
  takenBy = "";

  onClick() {
    this.open = true;
  }

  onClose() {
    this.open = false;
  }

  radioOnChange(event: any) {
    console.log(event);
  }

  onChangeAssignedTo(e: any) {
    this.assignedTo = e.value as string;
  }

  closeDrawer() {
    this.open = false;
  }

<goabx-button (onClick)="onClick()">Filters</goabx-button>
<goabx-drawer heading="Filters" [open]="open" (onClose)="onClose()" position="right" [actions]="actions">
  <goabx-form-item label="Entry status">
    <goab-checkbox-list name="entryStatus" (onChange)="onCheckboxChange($event)">
      <goabx-checkbox name="draft" text="Draft" value="draft"></goabx-checkbox>
      <goabx-checkbox name="published" text="Published" value="published"></goabx-checkbox>
    </goab-checkbox-list>
  </goabx-form-item>
  <goabx-form-item label="Assigned to - Region" mt="l">
    <goab-checkbox-list name="region" (onChange)="onCheckboxChange($event)">
      <goabx-checkbox name="calgary" text="Calgary" value="calgary"></goabx-checkbox>
      <goabx-checkbox name="central" text="Central" value="central"></goabx-checkbox>
      <goabx-checkbox name="edmonton" text="Edmonton" value="edmonton"></goabx-checkbox>
      <goabx-checkbox name="north" text="North" value="north"></goabx-checkbox>
      <goabx-checkbox name="south" text="South" value="south"></goabx-checkbox>
    </goab-checkbox-list>
  </goabx-form-item>
  <goabx-form-item label="Assigned to" mt="l">
    <goabx-dropdown [value]="assignedTo" name="assignedToData" (onChange)="onChangeAssignedTo($event)">
      <goabx-dropdown-item value="1" label="Person 1"></goabx-dropdown-item>
      <goabx-dropdown-item value="2" label="Person 2"></goabx-dropdown-item>
    </goabx-dropdown>
  </goabx-form-item>
  <goabx-form-item label="Date taken" mt="l">
    <goabx-radio-group name="dateTaken" (onChange)="radioOnChange($event)">
      <goabx-radio-item value="24" label="Last 24 hours"></goabx-radio-item>
      <goabx-radio-item value="72" label="Last 72 hours"></goabx-radio-item>
    </goabx-radio-group>
  </goabx-form-item>
  <ng-template #actions>
    <goab-button-group>
      <goabx-button type="primary" size="compact" (onClick)="closeDrawer()">Apply filters</goabx-button>
      <goabx-button type="tertiary" size="compact" (onClick)="closeDrawer()">Cancel</goabx-button>
    </goab-button-group>
  </ng-template>
</goabx-drawer>

const drawer = document.getElementById("filters-drawer");
const openBtn = document.getElementById("open-filters-btn");
const applyBtn = document.getElementById("apply-filters-btn");
const cancelBtn = document.getElementById("cancel-btn");

openBtn.addEventListener("_click", () => {
  drawer.setAttribute("open", "true");
});

drawer.addEventListener("_close", () => {
  drawer.removeAttribute("open");
});

applyBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

<goa-button version="2" id="open-filters-btn">Filters</goa-button>
<goa-drawer version="2" id="filters-drawer" heading="Filters" position="right">
  <goa-form-item version="2" label="Entry status">
    <goa-checkbox-list name="entryStatus">
      <goa-checkbox version="2" name="draft" text="Draft" value="draft"></goa-checkbox>
      <goa-checkbox version="2" name="published" text="Published" value="published"></goa-checkbox>
    </goa-checkbox-list>
  </goa-form-item>
  <goa-form-item version="2" label="Assigned to - Region" mt="l">
    <goa-checkbox-list name="region">
      <goa-checkbox version="2" name="calgary" text="Calgary" value="calgary"></goa-checkbox>
      <goa-checkbox version="2" name="central" text="Central" value="central"></goa-checkbox>
      <goa-checkbox version="2" name="edmonton" text="Edmonton" value="edmonton"></goa-checkbox>
      <goa-checkbox version="2" name="north" text="North" value="north"></goa-checkbox>
      <goa-checkbox version="2" name="south" text="South" value="south"></goa-checkbox>
    </goa-checkbox-list>
  </goa-form-item>
  <goa-form-item version="2" label="Assigned to" mt="l">
    <goa-dropdown version="2" name="assignedTo">
      <goa-dropdown-item value="1" label="Person 1"></goa-dropdown-item>
      <goa-dropdown-item value="2" label="Person 2"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Date taken" mt="l">
    <goa-radio-group version="2" name="dateTaken">
      <goa-radio-item value="24" label="Last 24 hours"></goa-radio-item>
      <goa-radio-item value="72" label="Last 72 hours"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group>
      <goa-button version="2" id="apply-filters-btn" type="primary" size="compact">Apply filters</goa-button>
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
    </goa-button-group>
  </div>
</goa-drawer>

const [open, setOpen] = useState(false);
  const [type, setType] = useState<string>();
  const [name, setName] = useState<string>();
  const [description, setDescription] = useState<string>();

<GoabxButton type="tertiary" leadingIcon="add" onClick={() => setOpen(true)}>
        Add another item
      </GoabxButton>
      <GoabxModal
          heading="Add a new item"
          open={open}
          actions={
            <GoabButtonGroup alignment="end">
              <GoabxButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
                Cancel
              </GoabxButton>
              <GoabxButton type="primary" size="compact" onClick={() => setOpen(false)}>
                Save new item
              </GoabxButton>
            </GoabButtonGroup>
          }
        >
          <p>Fill in the information to create a new item</p>
          <GoabxFormItem label="Type" mt="l">
            <GoabxDropdown onChange={(e) => setType(e.value)} value={type}>
              <GoabxDropdownItem value="1" label="Option 1" />
              <GoabxDropdownItem value="2" label="Option 2" />
            </GoabxDropdown>
          </GoabxFormItem>
          <GoabxFormItem label="Name" mt="l">
            <GoabxInput
              onChange={(e) => setName(e.value)}
              value={name}
              name="name"
              width="100%"
            />
          </GoabxFormItem>
          <GoabxFormItem label="Description" mt="l">
            <GoabxTextArea
              name="description"
              rows={3}
              width="100%"
              onChange={(e) => setDescription(e.value)}
              value={description}
            />
          </GoabxFormItem>
      </GoabxModal>

open = false;
  type: string | undefined = "";
  name = "";
  description = "";

  toggleModal() {
    this.open = !this.open;
  }

  updateType(event: any) {
    this.type = event.value;
  }

  updateName(event: any) {
    this.name = event.value;
  }

  updateDescription(event: any) {
    this.description = event.value;
  }

<goabx-button type="tertiary" leadingIcon="add" (onClick)="toggleModal()">Add another item</goabx-button>
<goabx-modal [open]="open" (onClose)="toggleModal()" heading="Add a new item" [actions]="actions">
  <p>Fill in the information to create a new item</p>
  <goabx-form-item label="Type" mt="l">
    <goabx-dropdown (onChange)="updateType($event)" [value]="type">
      <goabx-dropdown-item value="1" label="Option 1"></goabx-dropdown-item>
      <goabx-dropdown-item value="2" label="Option 2"></goabx-dropdown-item>
    </goabx-dropdown>
  </goabx-form-item>
  <goabx-form-item label="Name" mt="l">
    <goabx-input name="name" width="100%" (onChange)="updateName($event)" [value]="name"></goabx-input>
  </goabx-form-item>
  <goabx-form-item label="Description" mt="l">
    <goabx-textarea name="description" width="100%" [rows]="3" (onChange)="updateDescription($event)" [value]="description"></goabx-textarea>
  </goabx-form-item>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goabx-button type="tertiary" size="compact" (onClick)="toggleModal()">Cancel</goabx-button>
      <goabx-button type="primary" size="compact" (onClick)="toggleModal()">Save new item</goabx-button>
    </goab-button-group>
  </ng-template>
</goabx-modal>

const modal = document.getElementById("add-item-modal");
const openBtn = document.getElementById("open-modal-btn");
const cancelBtn = document.getElementById("cancel-btn");
const saveBtn = document.getElementById("save-btn");

openBtn.addEventListener("_click", () => {
  modal.setAttribute("open", "true");
});

modal.addEventListener("_close", () => {
  modal.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  modal.removeAttribute("open");
});

saveBtn.addEventListener("_click", () => {
  modal.removeAttribute("open");
});

<goa-button version="2" id="open-modal-btn" type="tertiary" leadingicon="add">Add another item</goa-button>
<goa-modal version="2" id="add-item-modal" heading="Add a new item">
  <p>Fill in the information to create a new item</p>
  <goa-form-item version="2" label="Type" mt="l">
    <goa-dropdown version="2" id="type-dropdown">
      <goa-dropdown-item value="1" label="Option 1"></goa-dropdown-item>
      <goa-dropdown-item value="2" label="Option 2"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Name" mt="l">
    <goa-input version="2" name="name" width="100%" id="name-input"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Description" mt="l">
    <goa-textarea version="2" name="description" width="100%" rows="3" id="description-textarea"></goa-textarea>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
      <goa-button version="2" id="save-btn" type="primary" size="compact">Save new item</goa-button>
    </goa-button-group>
  </div>
</goa-modal>

Ask a user for an address

const [address, setAddress] = useState("");
  const [suite, setSuite] = useState("");
  const [city, setCity] = useState("");
  const [province, setProvince] = useState("");
  const [postalCode, setPostalCode] = useState("");

<GoabText size="heading-l" mt="none" mb="xl">What is your address?</GoabText>
      <GoabxFormItem label="Street Address">
        <GoabxInput
          name="address"
          type="text"
          value={address}
          onChange={(e) => setAddress(e.value)}
          width="100%"
        />
      </GoabxFormItem>
      <GoabxFormItem label="Suite or unit #" mt="l">
        <GoabxInput
          name="suite"
          type="text"
          value={suite}
          onChange={(e) => setSuite(e.value)}
          width="100%"
        />
      </GoabxFormItem>
      <GoabxFormItem label="City or town" mt="l">
        <GoabxInput
          name="city"
          type="text"
          value={city}
          onChange={(e) => setCity(e.value)}
          width="100%"
        />
      </GoabxFormItem>
      <GoabBlock direction="row" gap="l" mt="l">
        <GoabxFormItem label="Province or territory">
          <GoabxDropdown
            onChange={(e) => setProvince(e.value ?? "")}
            name="province"
            value={province}
          >
            <GoabxDropdownItem label="Alberta" value="AB" />
            <GoabxDropdownItem label="British Columbia" value="BC" />
            <GoabxDropdownItem label="Manitoba" value="MB" />
            <GoabxDropdownItem label="New Brunswick" value="NB" />
            <GoabxDropdownItem label="Newfoundland and Labrador" value="NL" />
            <GoabxDropdownItem label="Northwest Territories" value="NT" />
            <GoabxDropdownItem label="Nova Scotia" value="NS" />
            <GoabxDropdownItem label="Nunavut" value="NU" />
            <GoabxDropdownItem label="Ontario" value="ON" />
            <GoabxDropdownItem label="Prince Edward Island" value="PE" />
            <GoabxDropdownItem label="Quebec" value="QC" />
            <GoabxDropdownItem label="Saskatchewan" value="SK" />
            <GoabxDropdownItem label="Yukon" value="YT" />
          </GoabxDropdown>
        </GoabxFormItem>
        <GoabxFormItem label="Postal Code">
          <GoabxInput
            name="postalCode"
            type="text"
            value={postalCode}
            onChange={(e) => setPostalCode(e.value)}
            width="7ch"
          />
        </GoabxFormItem>
      </GoabBlock>
      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabxButton type="primary" onClick={() => {}}>
          Save and continue
        </GoabxButton>
        <GoabxButton type="secondary" onClick={() => {}}>
          Cancel
        </GoabxButton>
      </GoabButtonGroup>

form!: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      address: [""],
      suite: [""],
      city: [""],
      province: [""],
      postalCode: [""],
    });
  }

  onClick() {
    // Handle form submission
  }

<goab-text size="heading-l" mt="none" mb="xl">What is your address?</goab-text>
<goabx-form-item label="Street Address">
  <goabx-input name="address" type="text" [formControl]="form.controls.address" width="100%"></goabx-input>
</goabx-form-item>
<goabx-form-item label="Suite or unit #" mt="l">
  <goabx-input name="suite" type="text" [formControl]="form.controls.suite" width="100%"></goabx-input>
</goabx-form-item>
<goabx-form-item label="City or town" mt="l">
  <goabx-input name="city" type="text" [formControl]="form.controls.city" width="100%"></goabx-input>
</goabx-form-item>
<goab-block direction="row" gap="l" mt="l">
  <goabx-form-item label="Province or territory">
    <goabx-dropdown name="province" [formControl]="form.controls.province">
      <goabx-dropdown-item label="Alberta" value="AB"></goabx-dropdown-item>
      <goabx-dropdown-item label="British Columbia" value="BC"></goabx-dropdown-item>
      <goabx-dropdown-item label="Manitoba" value="MB"></goabx-dropdown-item>
      <goabx-dropdown-item label="New Brunswick" value="NB"></goabx-dropdown-item>
      <goabx-dropdown-item label="Newfoundland and Labrador" value="NL"></goabx-dropdown-item>
      <goabx-dropdown-item label="Northwest Territories" value="NT"></goabx-dropdown-item>
      <goabx-dropdown-item label="Nova Scotia" value="NS"></goabx-dropdown-item>
      <goabx-dropdown-item label="Nunavut" value="NU"></goabx-dropdown-item>
      <goabx-dropdown-item label="Ontario" value="ON"></goabx-dropdown-item>
      <goabx-dropdown-item label="Prince Edward Island" value="PE"></goabx-dropdown-item>
      <goabx-dropdown-item label="Quebec" value="QC"></goabx-dropdown-item>
      <goabx-dropdown-item label="Saskatchewan" value="SK"></goabx-dropdown-item>
      <goabx-dropdown-item label="Yukon" value="YT"></goabx-dropdown-item>
    </goabx-dropdown>
  </goabx-form-item>
  <goabx-form-item label="Postal Code">
    <goabx-input name="postalCode" type="text" [formControl]="form.controls.postalCode" width="7ch"></goabx-input>
  </goabx-form-item>
</goab-block>
<goab-button-group alignment="start" mt="2xl">
  <goabx-button type="primary" (onClick)="onClick()">Save and continue</goabx-button>
  <goabx-button type="secondary" (onClick)="onClick()">Cancel</goabx-button>
</goab-button-group>

document.getElementById("save-btn")?.addEventListener("_click", () => {
  console.log("Form submitted");
});

<goa-text size="heading-l" mt="none" mb="xl">What is your address?</goa-text>
<goa-form-item version="2" label="Street Address">
  <goa-input version="2" name="address" type="text" width="100%" id="address-input"></goa-input>
</goa-form-item>
<goa-form-item version="2" label="Suite or unit #" mt="l">
  <goa-input version="2" name="suite" type="text" width="100%" id="suite-input"></goa-input>
</goa-form-item>
<goa-form-item version="2" label="City or town" mt="l">
  <goa-input version="2" name="city" type="text" width="100%" id="city-input"></goa-input>
</goa-form-item>
<goa-block direction="row" gap="l" mt="l">
  <goa-form-item version="2" label="Province or territory">
    <goa-dropdown version="2" name="province" id="province-dropdown">
      <goa-dropdown-item label="Alberta" value="AB"></goa-dropdown-item>
      <goa-dropdown-item label="British Columbia" value="BC"></goa-dropdown-item>
      <goa-dropdown-item label="Manitoba" value="MB"></goa-dropdown-item>
      <goa-dropdown-item label="New Brunswick" value="NB"></goa-dropdown-item>
      <goa-dropdown-item label="Newfoundland and Labrador" value="NL"></goa-dropdown-item>
      <goa-dropdown-item label="Northwest Territories" value="NT"></goa-dropdown-item>
      <goa-dropdown-item label="Nova Scotia" value="NS"></goa-dropdown-item>
      <goa-dropdown-item label="Nunavut" value="NU"></goa-dropdown-item>
      <goa-dropdown-item label="Ontario" value="ON"></goa-dropdown-item>
      <goa-dropdown-item label="Prince Edward Island" value="PE"></goa-dropdown-item>
      <goa-dropdown-item label="Quebec" value="QC"></goa-dropdown-item>
      <goa-dropdown-item label="Saskatchewan" value="SK"></goa-dropdown-item>
      <goa-dropdown-item label="Yukon" value="YT"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Postal Code">
    <goa-input version="2" name="postalCode" type="text" width="7ch" id="postal-input"></goa-input>
  </goa-form-item>
</goa-block>
<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" type="primary" id="save-btn">Save and continue</goa-button>
  <goa-button version="2" type="secondary" id="cancel-btn">Cancel</goa-button>
</goa-button-group>

type Task = {
  value: string;
  label: string;
  mount: GoabDropdownItemMountType;
};

const DEFAULT_TASKS: Task[] = [
    { label: "Finish Report", value: "finish-report", mount: "append" },
    { label: "Attend Meeting", value: "attend-meeting", mount: "append" },
    { label: "Reply Emails", value: "reply-emails", mount: "append" },
  ];

  const [tasks, setTasks] = useState<Task[]>(DEFAULT_TASKS);
  const [newTask, setNewTask] = useState<string>("");
  const [mountType, setMountType] = useState<string>("append");
  const [selectedTask, setSelectedTask] = useState<string>("");
  const [taskError, setTaskError] = useState<boolean>(false);
  const [isReset, setIsReset] = useState<boolean>(false);

  function onMountTypeChange(value: string | undefined) {
    setMountType(value as string);
  }

  function addTask() {
    if (newTask === "") {
      setTaskError(true);
      return;
    }
    setTaskError(false);

    const task: Task = {
      label: newTask,
      value: newTask.toLowerCase().replace(" ", "-"),
      mount: mountType as GoabDropdownItemMountType,
    };
    setTasks([...tasks, task]);
    setNewTask("");
    setIsReset(false);
  }

  function reset() {
    setTasks(DEFAULT_TASKS);
    setMountType("append");
    setNewTask("");
    setSelectedTask("");
    setTaskError(false);
    setIsReset(true);
  }

<GoabxFormItem
          requirement="required"
          label="Name of item"
          error={taskError ? "Please enter item name" : undefined}
          helpText="Add an item to the dropdown list below">
          <GoabxInput
            onChange={(event: GoabInputOnChangeDetail) => setNewTask(event.value)}
            name="item"
            value={newTask}
          />
        </GoabxFormItem>

        <GoabxFormItem mt="l" label="Add to">
          <GoabxRadioGroup
            name="mountType"
            onChange={(event: GoabRadioGroupOnChangeDetail) => onMountTypeChange(event.value)}
            value={mountType}
            orientation="horizontal">
            <GoabxRadioItem value="prepend" label="Start" />
            <GoabxRadioItem value="append" label="End" />
          </GoabxRadioGroup>
        </GoabxFormItem>

        <GoabButtonGroup alignment="start" gap="relaxed" mt="l">
          <GoabxButton type="primary" onClick={addTask}>
            Add new item
          </GoabxButton>
          <GoabxButton type="tertiary" onClick={reset}>
            Reset list
          </GoabxButton>
        </GoabButtonGroup>

        <GoabDivider mt="l" />

        <GoabxFormItem mt="l" label="All items">
          <div style={{ width: isReset ? "320px" : "auto" }}>
            <GoabxDropdown
              key={tasks.length}
              onChange={(event: GoabDropdownOnChangeDetail) =>
                setSelectedTask(event.value as string)
              }
              value={selectedTask}
              name="selectedTask">
              {tasks.map(task => (
                <GoabxDropdownItem
                  key={task.value}
                  value={task.value}
                  mountType={task.mount}
                  label={task.label}
                />
              ))}
            </GoabxDropdown>
          </div>
      </GoabxFormItem>

defaultTasks: Task[] = [
    { label: "Finish Report", value: "finish-report", mount: "append" },
    { label: "Attend Meeting", value: "attend-meeting", mount: "append" },
    { label: "Reply Emails", value: "reply-emails", mount: "append" },
  ];

  tasks: Task[] = [...this.defaultTasks];
  newTask = "";
  mountType: GoabDropdownItemMountType = "append";
  selectedTask = "";
  taskError = false;
  renderTrigger = true;

  onMountTypeChange(event: GoabRadioGroupOnChangeDetail): void {
    this.mountType = event.value as GoabDropdownItemMountType;
  }

  onNewTaskChange(event: GoabInputOnChangeDetail): void {
    this.newTask = event.value;
    this.taskError = false;
  }

  onSelectedTaskChange(event: GoabDropdownOnChangeDetail): void {
    this.selectedTask = event.value as string;
  }

  addTask(): void {
    if (this.newTask === "") {
      this.taskError = true;
      return;
    }
    this.taskError = false;

    const task: Task = {
      label: this.newTask,
      value: this.newTask.toLowerCase().replace(" ", "-"),
      mount: this.mountType,
    };
    this.tasks = this.mountType === "prepend"
      ? [task, ...this.tasks]
      : [...this.tasks, task];
    this.newTask = "";
  }

  reset(): void {
    this.newTask = "";
    this.selectedTask = "";
    this.taskError = false;
    this.tasks = [...this.defaultTasks];
    this.forceRerender();
  }

  forceRerender(): void {
    this.renderTrigger = false;
    setTimeout(() => {
      this.renderTrigger = true;
    }, 0);
  }

  trackByFn(index: number, item: Task): string {
    return item.value;
  }

<goabx-form-item
  requirement="required"
  label="Name of item"
  [error]="taskError ? 'Please enter item name' : undefined"
  helpText="Add an item to the dropdown list below">
  <goabx-input
    name="item"
    [value]="newTask"
    (onChange)="onNewTaskChange($event)">
  </goabx-input>
</goabx-form-item>

<goabx-form-item mt="l" label="Add to">
  <goabx-radio-group
    name="mountType"
    [value]="mountType"
    orientation="horizontal"
    (onChange)="onMountTypeChange($event)">
    <goabx-radio-item value="prepend" label="Start"></goabx-radio-item>
    <goabx-radio-item value="append" label="End"></goabx-radio-item>
  </goabx-radio-group>
</goabx-form-item>

<goab-button-group alignment="start" gap="relaxed" mt="l">
  <goabx-button type="primary" (onClick)="addTask()">
    Add new item
  </goabx-button>
  <goabx-button type="tertiary" (onClick)="reset()">
    Reset list
  </goabx-button>
</goab-button-group>

<goab-divider mt="l"></goab-divider>

<goabx-form-item mt="l" label="All items">
  <ng-container *ngIf="renderTrigger">
    <goabx-dropdown
      [value]="selectedTask"
      name="selectedTask"
      (onChange)="onSelectedTaskChange($event)">
      <goabx-dropdown-item
        *ngFor="let task of tasks; trackBy: trackByFn"
        [value]="task.value"
        [mountType]="task.mount"
        [label]="task.label">
      </goabx-dropdown-item>
    </goabx-dropdown>
  </ng-container>
</goabx-form-item>

const itemInput = document.getElementById('item-input');
const itemFormItem = document.getElementById('item-form-item');
const mountTypeGroup = document.getElementById('mount-type');
const addBtn = document.getElementById('add-btn');
const resetBtn = document.getElementById('reset-btn');
const dropdown = document.getElementById('task-dropdown');

let mountType = 'append';
let newTask = '';

const defaultItems = [
  { value: 'finish-report', label: 'Finish Report' },
  { value: 'attend-meeting', label: 'Attend Meeting' },
  { value: 'reply-emails', label: 'Reply Emails' }
];

mountTypeGroup.addEventListener('_change', (e) => {
  mountType = e.detail.value;
});

itemInput.addEventListener('_change', (e) => {
  newTask = e.detail.value;
  itemFormItem.removeAttribute('error');
});

addBtn.addEventListener('_click', () => {
  if (newTask === '') {
    itemFormItem.setAttribute('error', 'Please enter item name');
    return;
  }

  const newItem = document.createElement('goa-dropdown-item');
  newItem.setAttribute('value', newTask.toLowerCase().replace(' ', '-'));
  newItem.setAttribute('label', newTask);
  newItem.setAttribute('mount', mountType);
  dropdown.appendChild(newItem);

  itemInput.value = '';
  newTask = '';
});

resetBtn.addEventListener('_click', () => {
  dropdown.innerHTML = '';
  defaultItems.forEach(item => {
    const dropdownItem = document.createElement('goa-dropdown-item');
    dropdownItem.setAttribute('value', item.value);
    dropdownItem.setAttribute('label', item.label);
    dropdown.appendChild(dropdownItem);
  });
  itemInput.value = '';
  newTask = '';
  itemFormItem.removeAttribute('error');
});

<goa-form-item version="2"
  id="item-form-item"
  requirement="required"
  label="Name of item"
  helptext="Add an item to the dropdown list below">
  <goa-input version="2" id="item-input" name="item"></goa-input>
</goa-form-item>

<goa-form-item version="2" mt="l" label="Add to">
  <goa-radio-group version="2" id="mount-type" name="mountType" value="append" orientation="horizontal">
    <goa-radio-item value="prepend" label="Start"></goa-radio-item>
    <goa-radio-item value="append" label="End"></goa-radio-item>
  </goa-radio-group>
</goa-form-item>

<goa-button-group alignment="start" gap="relaxed" mt="l">
  <goa-button version="2" id="add-btn" type="primary">Add new item</goa-button>
  <goa-button version="2" id="reset-btn" type="tertiary">Reset list</goa-button>
</goa-button-group>

<goa-divider mt="l"></goa-divider>

<goa-form-item version="2" mt="l" label="All items">
  <goa-dropdown version="2" id="task-dropdown" name="selectedTask">
    <goa-dropdown-item value="finish-report" label="Finish Report"></goa-dropdown-item>
    <goa-dropdown-item value="attend-meeting" label="Attend Meeting"></goa-dropdown-item>
    <goa-dropdown-item value="reply-emails" label="Reply Emails"></goa-dropdown-item>
  </goa-dropdown>
</goa-form-item>

const [children, setChildren] = useState<string[]>([]);
  const parents = ["All", "Big", "Small"];
  const childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
  const childrenBig = ["Elephant", "Truck", "Bus"];
  const childrenSmall = ["Key", "Pen", "Watch"];

  const loadItems = (value: string) => {
    if (value === "All") setChildren(childrenAll);
    else if (value === "Big") setChildren(childrenBig);
    else setChildren(childrenSmall);
  };

  const logSelection = () => {
    console.log("Item selected");
  };

<GoabxFormItem
          label="Size"
          requirement="optional"
          helpText="Choose the size to change the list below">
          <GoabxDropdown
            name="parent"
            placeholder="Select a value"
            onChange={(event: GoabDropdownOnChangeDetail) =>
              loadItems(event.value as string)
            }>
            {parents.map(parent => (
              <GoabxDropdownItem key={parent} value={parent} label={parent} />
            ))}
          </GoabxDropdown>
        </GoabxFormItem>

        <GoabxFormItem label="Items" requirement="optional" mt="xl">
          <GoabxDropdown name="children" placeholder="Select a value" onChange={logSelection}>
            {children.map((child) => (
              <GoabxDropdownItem
                key={crypto.randomUUID()}
                value={child}
                label={child}
                mountType="reset"
              />
            ))}
          </GoabxDropdown>
      </GoabxFormItem>

<div [formGroup]="changeForm" style="padding: 40px;">
  <goabx-form-item label="Size" requirement="optional" helpText="Choose the size to change the list below">
    <goabx-dropdown formControlName="parentDropdown" placeholder="Select a value" name="parent">
      <goabx-dropdown-item *ngFor="let parent of parents" [value]="parent" [label]="parent" />
    </goabx-dropdown>
  </goabx-form-item>

  <goabx-form-item label="Items" requirement="optional" mt="xl">
    <goabx-dropdown formControlName="childDropdown" placeholder="Select a value" name="children">
      <ng-container *ngIf="children.length > 0">
        <goabx-dropdown-item
          *ngFor="let child of children; trackBy: generateUniqueKey"
          [value]="child"
          [label]="child"
          [mountType]="'reset'"
        />
      </ng-container>
    </goabx-dropdown>
  </goabx-form-item>
</div>

const parentDropdown = document.getElementById('parent-dropdown');
const childDropdown = document.getElementById('child-dropdown');

const childrenAll = ['Bus', 'Elephant', 'Key', 'Pen', 'Watch', 'Truck'];
const childrenBig = ['Elephant', 'Truck', 'Bus'];
const childrenSmall = ['Key', 'Pen', 'Watch'];

function updateChildren(items) {
  childDropdown.innerHTML = '';
  items.forEach(item => {
    const dropdownItem = document.createElement('goa-dropdown-item');
    dropdownItem.setAttribute('value', item);
    dropdownItem.setAttribute('label', item);
    dropdownItem.setAttribute('mount', 'reset');
    childDropdown.appendChild(dropdownItem);
  });
}

parentDropdown.addEventListener('_change', (e) => {
  const value = e.detail.value;
  if (value === 'All') updateChildren(childrenAll);
  else if (value === 'Big') updateChildren(childrenBig);
  else updateChildren(childrenSmall);
});

childDropdown.addEventListener('_change', () => {
  console.log('Item selected');
});

<div style="padding: 40px;">
  <goa-form-item version="2" label="Size" requirement="optional" helptext="Choose the size to change the list below">
    <goa-dropdown version="2" id="parent-dropdown" placeholder="Select a value" name="parent">
      <goa-dropdown-item value="All" label="All"></goa-dropdown-item>
      <goa-dropdown-item value="Big" label="Big"></goa-dropdown-item>
      <goa-dropdown-item value="Small" label="Small"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>

  <goa-form-item version="2" label="Items" requirement="optional" mt="xl">
    <goa-dropdown version="2" id="child-dropdown" placeholder="Select a value" name="children">
    </goa-dropdown>
  </goa-form-item>
</div>

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>

Review and action

<GoabGrid minChildWidth="315px">
      <GoabContainer accent="thin" type="non-interactive">
        <GoabText size="heading-m" mt="none" mb="m">Appearance details</GoabText>
        <GoabGrid minChildWidth="200px" gap="m">
          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Accused name</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Doe, John Scott</GoabText>
          </GoabBlock>

          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Date of birth</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Mar 14, 2021</GoabText>
          </GoabBlock>

          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Court location</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Calgary</GoabText>
          </GoabBlock>

          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Sep 20, 2021</GoabText>
          </GoabBlock>
        </GoabGrid>

        <GoabText size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</GoabText>
        <GoabContainer type="non-interactive" padding="compact">
          <GoabText size="heading-xs" mt="none" mb="xs">1

    h3.review-h3 {
      margin-bottom: var(--goa-space-m);
    }
    label.review-label {
      font: var(--goa-typography-body-s);
      color: var(--goa-color-text-secondary);
    }
    .review-content {
      font: var(--goa-typography-body-m);
    }
    p.review-content {
      margin-bottom: 0;
    }
    h5.review-h5 {
      font: var(--goa-typography-body-m);
      color: var(--goa-color-text-secondary);
      margin-top: var(--goa-space-m);
      margin-bottom: var(--goa-space-m);
    }
    h6.review-h6 {
      font: var(--goa-typography-heading-s);
      margin-top: 0;
      margin-bottom: 0;
    }
  `,
  ],
})
export class ReviewAndActionComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      case: ["

form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      case: [""],
      reason: [""],
      message: [""],
    });
  }

  onClick(): void {
    console.log("Confirm clicked!");
  }

<goab-grid minChildWidth="315px">
  <goab-container accent="thin" type="non-interactive">
    <goab-text size="heading-m" mt="none" mb="m">Appearance details</goab-text>
    <goab-grid minChildWidth="200px" gap="m">
      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Accused name</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Doe, John Scott</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Date of birth</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Mar 14, 2021</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Court location</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Calgary</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Sep 20, 2021</goab-text>
      </goab-block>
    </goab-grid>

    <goab-text size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</goab-text>
    <goab-container type="non-interactive" padding="compact">
      <goab-text size="heading-xs" mt="none" mb="xs">1) 12345678</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goab-text>
    </goab-container>

    <goab-container type="non-interactive" padding="compact">
      <goab-text size="heading-xs" mt="none" mb="xs">2) 12345678</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goab-text>
    </goab-container>
  </goab-container>

  <goab-container accent="thin" width="content">
    <form [formGroup]="form">
      <goab-text size="heading-m" mt="none" mb="m">Adjournment request</goab-text>
      <goab-text size="body-m" mt="none" mb="none">
        Keep track of the individuals who are placed in lodges and may qualify for the Lodge
        Assistance Program subsidy.
      </goab-text>

      <goabx-form-item label="Case history and new request" mt="l">
        <goabx-radio-group name="case" orientation="horizontal" formControlName="case">
          <goabx-radio-item value="grant" label="Grant"></goabx-radio-item>
          <goabx-radio-item value="deny" label="Deny"></goabx-radio-item>
        </goabx-radio-group>
      </goabx-form-item>

      <goabx-form-item label="Reason to deny" mt="l">
        <goabx-dropdown name="reason" width="100%" formControlName="reason">
          <goabx-dropdown-item value="1" label="Incomplete Application"></goabx-dropdown-item>
          <goabx-dropdown-item value="2" label="Eligibility Criteria Not Met"></goabx-dropdown-item>
          <goabx-dropdown-item value="3" label="Documentation Verification Failure"></goabx-dropdown-item>
        </goabx-dropdown>
      </goabx-form-item>

      <goabx-form-item label="Message" mt="l">
        <goabx-textarea name="message" [rows]="5" width="100%" formControlName="message"></goabx-textarea>
      </goabx-form-item>

      <goabx-button mt="xl" (onClick)="onClick()">Confirm adjournment</goabx-button>
    </form>
  </goab-container>
</goab-grid>

document.getElementById("confirm-btn").addEventListener("_click", () => {
  console.log("Confirm clicked!");
});

<goa-grid minchildwidth="315px">
  <goa-container accent="thin" type="non-interactive">
    <goa-text size="heading-m" mt="none" mb="m">Appearance details</goa-text>
    <goa-grid minchildwidth="200px" gap="m">
      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Accused name</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Doe, John Scott</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Date of birth</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Mar 14, 2021</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Court location</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Calgary</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Sep 20, 2021</goa-text>
      </goa-block>
    </goa-grid>

    <goa-text size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</goa-text>
    <goa-container type="non-interactive" padding="compact">
      <goa-text size="heading-xs" mt="none" mb="xs">1) 12345678</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goa-text>
    </goa-container>

    <goa-container type="non-interactive" padding="compact">
      <goa-text size="heading-xs" mt="none" mb="xs">2) 12345678</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goa-text>
    </goa-container>
  </goa-container>

  <goa-container accent="thin" width="content">
    <form>
      <goa-text size="heading-m" mt="none" mb="m">Adjournment request</goa-text>
      <goa-text size="body-m" mt="none" mb="none">
        Keep track of the individuals who are placed in lodges and may qualify for the Lodge
        Assistance Program subsidy.
      </goa-text>

      <goa-form-item version="2" label="Case history and new request" mt="l">
        <goa-radio-group version="2" name="case" orientation="horizontal">
          <goa-radio-item value="grant" label="Grant"></goa-radio-item>
          <goa-radio-item value="deny" label="Deny"></goa-radio-item>
        </goa-radio-group>
      </goa-form-item>

      <goa-form-item version="2" label="Reason to deny" mt="l">
        <goa-dropdown version="2" name="reason" width="100%">
          <goa-dropdown-item value="1" label="Incomplete Application"></goa-dropdown-item>
          <goa-dropdown-item value="2" label="Eligibility Criteria Not Met"></goa-dropdown-item>
          <goa-dropdown-item value="3" label="Documentation Verification Failure"></goa-dropdown-item>
        </goa-dropdown>
      </goa-form-item>

      <goa-form-item version="2" label="Message" mt="l">
        <goa-textarea version="2" name="message" rows="5" width="100%"></goa-textarea>
      </goa-form-item>

      <goa-button version="2" id="confirm-btn" mt="xl">Confirm adjournment</goa-button>
    </form>
  </goa-container>
</goa-grid>

Show number of results per page

interface User {
  id: string;
  firstName: string;
  lastName: string;
  age: number;
}

const [users, setUsers] = useState<User[]>([]);
  const [pageUsers, setPageUsers] = useState<User[]>([]);
  const [page, setPage] = useState<number>(1);
  const [perPage, setPerPage] = useState<number>(10);

  useEffect(() => {
    // Generate sample data
    const firstNames = ["Emma", "Liam", "Olivia", "Noah", "Ava", "James", "Sophia", "William", "Isabella", "Oliver", "Mia", "Benjamin", "Charlotte", "Elijah", "Amelia", "Lucas", "Harper", "Mason", "Evelyn", "Logan"];
    const lastNames = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez", "Wilson", "Anderson", "Taylor", "Thomas", "Moore", "Jackson", "Martin", "Lee", "Thompson", "White"];
    const _users: User[] = [];
    for (let i = 1; i <= 100; i++) {
      _users.push({
        id: `user-${i}`,
        firstName: firstNames[(i - 1) % firstNames.length],
        lastName: lastNames[(i - 1) % lastNames.length],
        age: 20 + (i % 40),
      });
    }
    setUsers(_users);
    setPageUsers(_users.slice(0, perPage));
  }, [perPage]);

  function changePage(newPage: number) {
    const offset = (newPage - 1) * perPage;
    const _users = users.slice(offset, offset + perPage);
    setPage(newPage);
    setPageUsers(_users);
  }

  function handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) {
    const perPageValue = parseInt(event.value || "10");
    setPage(1);
    setPerPage(perPageValue);
    const _users = users.slice(0, perPageValue);
    setPageUsers(_users);
  }

<GoabxTable width="100%" mb="xl">
        <thead>
          <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {pageUsers.map((u) => (
            <tr key={u.id}>
              <td>{u.firstName}</td>
              <td>{u.lastName}</td>
              <td>{u.age}</td>
            </tr>
          ))}
        </tbody>
      </GoabxTable>

      <GoabBlock alignment="center" width="100%">
        <GoabBlock mb="m" alignment="center">
          Show
          <GoabxDropdown
            onChange={handlePerPageCountChangeEvent}
            value={perPage.toString()}
            width="9ch"
          >
            <GoabxDropdownItem value="10" label="10" />
            <GoabxDropdownItem value="20" label="20" />
            <GoabxDropdownItem value="30" label="30" />
          </GoabxDropdown>
          <span style={{ width: "75px" }}>per page</span>
        </GoabBlock>
        <GoabSpacer hSpacing="fill" />
        <GoabxPagination
          itemCount={users.length}
          perPageCount={perPage}
          pageNumber={page}
          onChange={(event) => changePage(event.page)}
        />
      </GoabBlock>

users: User[] = [];
  pageUsers: User[] = [];
  page = 1;
  perPage = 10;
  total = 100;

  constructor() {
    this.pageUsers = this.prepareUsers().slice(0, this.perPage);
  }

  prepareUsers(): User[] {
    const firstNames = ["Emma", "Liam", "Olivia", "Noah", "Ava", "James", "Sophia", "William", "Isabella", "Oliver", "Mia", "Benjamin", "Charlotte", "Elijah", "Amelia", "Lucas", "Harper", "Mason", "Evelyn", "Logan"];
    const lastNames = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez", "Wilson", "Anderson", "Taylor", "Thomas", "Moore", "Jackson", "Martin", "Lee", "Thompson", "White"];
    for (let i = 1; i <= this.total; i++) {
      this.users.push({
        id: `user-${i}`,
        firstName: firstNames[(i - 1) % firstNames.length],
        lastName: lastNames[(i - 1) % lastNames.length],
        age: 20 + (i % 40),
      });
    }
    return this.users;
  }

  handlePageChange(event: GoabPaginationOnChangeDetail): void {
    this.page = event.page;
    const offset = (this.page - 1) * this.perPage;
    this.pageUsers = this.users.slice(offset, offset + this.perPage);
  }

  handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail): void {
    this.page = 1;
    this.perPage = Number(event.value);
    this.pageUsers = this.users.slice(0, this.perPage);
  }

<goabx-table width="100%" mb="xl">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of pageUsers">
      <td>{{ user.firstName }}</td>
      <td>{{ user.lastName }}</td>
      <td>{{ user.age }}</td>
    </tr>
  </tbody>
</goabx-table>

<goab-block alignment="center" width="100%">
  <goab-block mb="m" alignment="center">
    Show
    <goabx-dropdown
      (onChange)="handlePerPageCountChangeEvent($event)"
      value="10"
      width="9ch">
      <goabx-dropdown-item value="10" label="10"></goabx-dropdown-item>
      <goabx-dropdown-item value="20" label="20"></goabx-dropdown-item>
      <goabx-dropdown-item value="30" label="30"></goabx-dropdown-item>
    </goabx-dropdown>
    <span style="width: 75px">per page</span>
  </goab-block>

  <goab-spacer hSpacing="fill"></goab-spacer>

  <goabx-pagination
    [itemCount]="users.length"
    [perPageCount]="perPage"
    [pageNumber]="page"
    (onChange)="handlePageChange($event)">
  </goabx-pagination>
</goab-block>

const firstNames = ["Emma", "Liam", "Olivia", "Noah", "Ava", "James", "Sophia", "William", "Isabella", "Oliver", "Mia", "Benjamin", "Charlotte", "Elijah", "Amelia", "Lucas", "Harper", "Mason", "Evelyn", "Logan"];
const lastNames = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez", "Wilson", "Anderson", "Taylor", "Thomas", "Moore", "Jackson", "Martin", "Lee", "Thompson", "White"];
const users = [];
for (let i = 1; i <= 100; i++) {
  users.push({
    id: "user-" + i,
    firstName: firstNames[(i - 1) % firstNames.length],
    lastName: lastNames[(i - 1) % lastNames.length],
    age: 20 + (i % 40),
  });
}

let page = 1;
let perPage = 10;

const tableBody = document.getElementById("table-body");
const pagination = document.getElementById("pagination");
const dropdown = document.getElementById("per-page-dropdown");

function renderTable() {
  const offset = (page - 1) * perPage;
  const pageUsers = users.slice(offset, offset + perPage);

  tableBody.innerHTML = pageUsers
    .map(
      (u) => `
      <tr>
        <td>${u.firstName}</td>
        <td>${u.lastName}</td>
        <td>${u.age}</td>
      </tr>
    `
    )
    .join("");
}

pagination.addEventListener("_change", (e) => {
  page = e.detail.page;
  renderTable();
});

dropdown.addEventListener("_change", (e) => {
  perPage = parseInt(e.detail.value);
  page = 1;
  pagination.setAttribute("perpagecount", perPage);
  pagination.setAttribute("pagenumber", "1");
  renderTable();
});

renderTable();

<goa-table version="2" width="100%" mb="xl">
  <table width="100%">
    <thead>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody id="table-body">
      <!-- Rows populated by JavaScript -->
    </tbody>
  </table>
</goa-table>

<goa-block alignment="center" width="100%">
  <goa-block mb="m" alignment="center">
    Show
    <goa-dropdown version="2" id="per-page-dropdown" value="10" width="9ch">
      <goa-dropdown-item value="10" label="10"></goa-dropdown-item>
      <goa-dropdown-item value="20" label="20"></goa-dropdown-item>
      <goa-dropdown-item value="30" label="30"></goa-dropdown-item>
    </goa-dropdown>
    <span style="width: 75px">per page</span>
  </goa-block>

  <goa-spacer hspacing="fill"></goa-spacer>

  <goa-pagination version="2"
    id="pagination"
    itemcount="100"
    perpagecount="10"
    pagenumber="1">
  </goa-pagination>
</goa-block>

States

Submit

When you must disable a button or input:

Provide nearby text explaining what needs to happen first
Consider showing the element enabled with validation on submit instead
Use aria-describedby to link the disabled element to explanatory text

Don't

Don't disable buttons or inputs without explaining why. Disabled controls can be confusing and users may not understand why they can't interact with an element.

Sizing

Define dropdown widths based on the widest dropdown in the form.

Use the default width for dropdowns. The dropdown automatically sets its width based on the length of the options.

Positioning

Don't

Don't allow the dropdown menu to hide below the viewport.

Content

Don't

Don't truncate labels. Longer labels should wrap to the next line.

Placeholder text disappears when users start typing, leaving them without context for what the field is asking for.

Always use a visible label above or beside the input field. Placeholder text can provide an example of the expected format, but should never be the only indication of what information is needed.

Don't

Don't use placeholder text as a label

Other

The form item automatically associates the label with the input for screen readers, ensuring your form is accessible.

Use a form item wrapper on all inputs to add a label, helper text, error message, and more.

All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

Props

Events

Add a record using a drawer

Add and edit lots of filters

Add another item in a modal

Ask a user for an address

Dynamically add an item to a dropdown list

Dynamically change items in a dropdown list

Group related questions together on a question page

Review and action

Show number of results per page

States

Sizing

Positioning

Content

Other