Ask a user for direct deposit information

const [bankNumber, setBankNumber] = useState("");
  const [transitNumber, setTransitNumber] = useState("");
  const [accountNumber, setAccountNumber] = useState("");

<GoabText as="h1" size="heading-l" mt="none" mb="m">Direct deposit information</GoabText>
      <GoabText as="p" mb="xl">
        Find this information on your bank's website or on your personal cheques.
        Contact your bank if you can't find this information.
      </GoabText>
      <form>
        <GoabxFormItem
          label="Bank or Institution number"
          helpText="3-4 digits in length"
        >
          <GoabxInput
            maxLength={4}
            name="bankNumber"
            onChange={(e) => setBankNumber(e.value)}
            value={bankNumber}
            ariaLabel="bankNumber"
            width="88px"
          />
        </GoabxFormItem>
        <GoabxFormItem
          label="Branch or Transit number"
          helpText="5 digits in length"
          mt="l"
        >
          <GoabxInput
            maxLength={5}
            name="transitNumber"
            onChange={(e) => setTransitNumber(e.value)}
            value={transitNumber}
            ariaLabel="transitNumber"
            width="143px"
          />
        </GoabxFormItem>
        <GoabxFormItem
          label="Account number"
          helpText="3-12 digits in length"
          mt="l"
        >
          <GoabxInput
            maxLength={12}
            name="accountNumber"
            value={accountNumber}
            onChange={(e) => setAccountNumber(e.value)}
            ariaLabel="accountNumber"
          />
        </GoabxFormItem>
      </form>
      <GoabDetails heading="Where can I find this information on a personal cheque?" mt="l">
        <GoabText as="p" mb="m">
          Below is an example of where you can find the required bank information
          on a personal cheque.
        </GoabText>
        <img src="https://design.alberta.ca/images/details-demo.jpg" alt="Cheque example showing bank information locations" />
      </GoabDetails>

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

form!: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      bankNumber: [""],
      transitNumber: [""],
      accountNumber: [""],
    });
  }

<goab-text as="h1" size="heading-l" mt="none" mb="m">Direct deposit information</goab-text>
<goab-text as="p" mb="xl">
  Find this information on your bank's website or on your personal cheques.
  Contact your bank if you can't find this information.
</goab-text>
<form [formGroup]="form">
  <goabx-form-item
    label="Bank or Institution number"
    helpText="3-4 digits in length">
    <goabx-input
      [maxLength]="4"
      name="bankNumber"
      [formControl]="form.controls.bankNumber"
      ariaLabel="bankNumber"
      width="88px">
    </goabx-input>
  </goabx-form-item>
  <goabx-form-item
    label="Branch or Transit number"
    helpText="5 digits in length"
    mt="l">
    <goabx-input
      [maxLength]="5"
      name="transitNumber"
      [formControl]="form.controls.transitNumber"
      ariaLabel="transitNumber"
      width="143px">
    </goabx-input>
  </goabx-form-item>
  <goabx-form-item
    label="Account number"
    helpText="3-12 digits in length"
    mt="l">
    <goabx-input
      [maxLength]="12"
      name="accountNumber"
      [formControl]="form.controls.accountNumber"
      ariaLabel="accountNumber">
    </goabx-input>
  </goabx-form-item>
</form>
<goab-details heading="Where can I find this information on a personal cheque?" mt="l">
  <goab-text as="p" mb="m">Below is an example of where you can find the required bank information on a personal cheque.</goab-text>
  <img src="https://design.alberta.ca/images/details-demo.jpg" alt="Cheque example" />
</goab-details>

<goabx-button type="submit" mt="2xl" (onClick)="onSubmit()">
  Save and continue
</goabx-button>

["bank-number-input", "transit-number-input", "account-number-input"].forEach((id) => {
  document.getElementById(id)?.addEventListener("_change", (e) => {
    console.log(`${id}:`, e.detail.value);
  });
});

<goa-text as="h1" size="heading-l" mt="none" mb="m">Direct deposit information</goa-text>
<goa-text as="p" mb="xl">
  Find this information on your bank's website or on your personal cheques.
  Contact your bank if you can't find this information.
</goa-text>
<form>
  <goa-form-item version="2"
    label="Bank or Institution number"
    helptext="3-4 digits in length">
    <goa-input version="2"
      maxlength="4"
      name="bankNumber"
      id="bank-number-input"
      aria-label="bankNumber"
      width="88px">
    </goa-input>
  </goa-form-item>
  <goa-form-item version="2"
    label="Branch or Transit number"
    helptext="5 digits in length"
    mt="l">
    <goa-input version="2"
      maxlength="5"
      name="transitNumber"
      id="transit-number-input"
      aria-label="transitNumber"
      width="143px">
    </goa-input>
  </goa-form-item>
  <goa-form-item version="2"
    label="Account number"
    helptext="3-12 digits in length"
    mt="l">
    <goa-input version="2"
      maxlength="12"
      name="accountNumber"
      id="account-number-input"
      aria-label="accountNumber">
    </goa-input>
  </goa-form-item>
</form>
<goa-details heading="Where can I find this information on a personal cheque?" mt="l">
  <goa-text as="p" mb="m">Below is an example of where you can find the required bank information on a personal cheque.</goa-text>
  <img src="https://design.alberta.ca/images/details-demo.jpg" alt="Cheque example" />
</goa-details>

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