Details

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>

const [textValue, setTextValue] = useState("");

  const handleChange = (event: GoabTextAreaOnChangeDetail) => {
    setTextValue(event.value);
  };

  const handleContinue = () => {
    console.log("Submitted:", textValue);
  };

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

      <GoabText as="h2" mt="xl" mb="m">Submit a question about your benefits</GoabText>
      <GoabText mt="none" mb="xl">
        If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
        question here.
      </GoabText>

      <form>
        <GoabxFormItem
          label="Provide details about your situation"
          helpText="Include specific details to help us answer your question quickly.">
          <GoabxTextArea
            name="program"
            onChange={handleChange}
            value={textValue}
            maxCount={400}
            countBy="character"
          />
        </GoabxFormItem>
      </form>

      <GoabDetails mt="m" heading="What kind of information is useful?">
        <p>
          Include your benefit program name, mention any recent correspondence you received and/or provide any
          relevant case or reference numbers.
        </p>
      </GoabDetails>

      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabxButton type="primary" onClick={handleContinue}>
          Continue
        </GoabxButton>
      </GoabButtonGroup>

form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      program: [""]
    });
  }

  onContinue(): void {
    console.log("Submitted:", this.form.get("program")?.value);
  }

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

<goab-text as="h2" mt="xl" mb="m">Submit a question about your benefits</goab-text>
<goab-text mt="none" mb="xl">
  If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
  question here.
</goab-text>

<form [formGroup]="form">
  <goabx-form-item
    label="Provide details about your situation"
    helpText="Include specific details to help us answer your question quickly.">
    <goabx-textarea
      formControlName="program"
      name="program"
      [maxCount]="400"
      countBy="character">
    </goabx-textarea>
  </goabx-form-item>
</form>

<goab-details mt="m" heading="What kind of information is useful?">
  <p>
    Include your benefit program name, mention any recent correspondence you received and/or provide any
    relevant case or reference numbers.
  </p>
</goab-details>

<goab-button-group alignment="start" mt="2xl">
  <goabx-button type="primary" (onClick)="onContinue()">
    Continue
  </goabx-button>
</goab-button-group>

const textarea = document.getElementById('program-textarea');
const continueBtn = document.getElementById('continue-btn');

continueBtn.addEventListener('_click', () => {
  console.log('Submitted:', textarea.value);
});

<goa-link leadingicon="arrow-back" size="small" mb="none">
  Back
</goa-link>

<goa-text as="h2" mt="xl" mb="m">Submit a question about your benefits</goa-text>
<goa-text mt="none" mb="xl">
  If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
  question here.
</goa-text>

<form>
  <goa-form-item version="2"
    label="Provide details about your situation"
    helptext="Include specific details to help us answer your question quickly.">
    <goa-textarea version="2"
      id="program-textarea"
      name="program"
      maxcount="400"
      countby="character">
    </goa-textarea>
  </goa-form-item>
</form>

<goa-details mt="m" heading="What kind of information is useful?">
  <p>
    Include your benefit program name, mention any recent correspondence you received and/or provide any
    relevant case or reference numbers.
  </p>
</goa-details>

<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" id="continue-btn" type="primary">
    Continue
  </goa-button>
</goa-button-group>

const handleChange = (event: GoabRadioGroupOnChangeDetail) => {
    console.log("value is", event.value);
  };

<form>
      <GoabxFormItem
        label="Do you have additional education expenses?"
        helpText="You can request funding for these now or at any time during your program."
        mb="m">
        <GoabxRadioGroup name="additional" onChange={handleChange}>
          <GoabxRadioItem label="Yes" value="yes" name="additional" />
          <GoabxRadioItem label="No" value="no" name="additional" />
        </GoabxRadioGroup>
      </GoabxFormItem>

      <GoabDetails heading="What are additional education expenses?">
        <GoabBlock gap="m" mt="m">
          <div>
            <strong>Examples of education expenses</strong>
            <ul className="goa-unordered-list">
              <li>Laptop and computer hardware</li>
              <li>Computer apps and subscriptions</li>
              <li>Home internet</li>
              <li>Testing and exam fees</li>
              <li>Work or school clothing, like work boots</li>
            </ul>
          </div>
          <div>
            <strong>Do not include</strong>
            <ul className="goa-unordered-list">
              <li>Tuition</li>
              <li>Mandatory fees</li>
              <li>Books and supplies</li>
              <li>School association fees</li>
            </ul>
          </div>
        </GoabBlock>
      </GoabDetails>
    </form>

form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      additional: [""]
    });
  }

  onRadioChange(event: Event): void {
    const detail = (event as CustomEvent).detail;
    console.log("value is", detail.value);
  }

<form [formGroup]="form">
  <goabx-form-item
    label="Do you have additional education expenses?"
    helpText="You can request funding for these now or at any time during your program."
    mb="m">
    <goabx-radio-group name="additional" (onChange)="onRadioChange($event)">
      <goabx-radio-item label="Yes" value="yes" name="additional"></goabx-radio-item>
      <goabx-radio-item label="No" value="no" name="additional"></goabx-radio-item>
    </goabx-radio-group>
  </goabx-form-item>

  <goab-details heading="What are additional education expenses?">
    <goab-block gap="m" mt="m">
      <div>
        <strong>Examples of education expenses</strong>
        <ul class="goa-unordered-list">
          <li>Laptop and computer hardware</li>
          <li>Computer apps and subscriptions</li>
          <li>Home internet</li>
          <li>Testing and exam fees</li>
          <li>Work or school clothing, like work boots</li>
        </ul>
      </div>
      <div>
        <strong>Do not include</strong>
        <ul class="goa-unordered-list">
          <li>Tuition</li>
          <li>Mandatory fees</li>
          <li>Books and supplies</li>
          <li>School association fees</li>
        </ul>
      </div>
    </goab-block>
  </goab-details>
</form>

document.querySelector('goa-radio-group').addEventListener('_change', (e) => {
  console.log('value is', e.detail.value);
});

<form>
  <goa-form-item version="2"
    label="Do you have additional education expenses?"
    helptext="You can request funding for these now or at any time during your program."
    mb="m">
    <goa-radio-group version="2" name="additional">
      <goa-radio-item label="Yes" value="yes" name="additional"></goa-radio-item>
      <goa-radio-item label="No" value="no" name="additional"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>

  <goa-details heading="What are additional education expenses?">
    <goa-block gap="m" mt="m">
      <div>
        <strong>Examples of education expenses</strong>
        <ul class="goa-unordered-list">
          <li>Laptop and computer hardware</li>
          <li>Computer apps and subscriptions</li>
          <li>Home internet</li>
          <li>Testing and exam fees</li>
          <li>Work or school clothing, like work boots</li>
        </ul>
      </div>
      <div>
        <strong>Do not include</strong>
        <ul class="goa-unordered-list">
          <li>Tuition</li>
          <li>Mandatory fees</li>
          <li>Books and supplies</li>
          <li>School association fees</li>
        </ul>
      </div>
    </goa-block>
  </goa-details>
</form>

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

      <GoabxFormItem
        mt="xl"
        label="Do you pay for child care?"
        labelSize="large"
        helpText="Examples of child care are daycares, day homes and baby-sisters."
      >
        <GoabxRadioGroup
          name="child-care"
          ariaLabel="Do you pay for child care?"
          onChange={() => {}}
        >
          <GoabxRadioItem value="yes" label="Yes" />
          <GoabxRadioItem value="no" label="No" />
        </GoabxRadioGroup>
      </GoabxFormItem>

      <GoabDetails heading="Why are we asking this question?" mt="l">
        <p>We ask this question to determine if you are eligible for child care benefits.</p>
      </GoabDetails>

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

onRadioChange(event: Event): void {
    console.log("Radio changed:", event);
  }

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

<goabx-form-item
  mt="xl"
  label="Do you pay for child care?"
  labelSize="large"
  helpText="Examples of child care are daycares, day homes and baby-sisters.">
  <goabx-radio-group
    name="child-care"
    ariaLabel="Do you pay for child care?"
    (onChange)="onRadioChange($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>

<goab-details heading="Why are we asking this question?" mt="l">
  <p>We ask this question to determine if you are eligible for child care benefits.</p>
</goab-details>

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

<goa-link leadingicon="arrow-back" size="small" mb="none">
  Back
</goa-link>

<goa-form-item version="2"
  mt="xl"
  label="Do you pay for child care?"
  labelsize="large"
  helptext="Examples of child care are daycares, day homes and baby-sisters.">
  <goa-radio-group version="2"
    name="child-care"
    arialabel="Do you pay for child care?">
    <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-details heading="Why are we asking this question?" mt="l">
  <p>We ask this question to determine if you are eligible for child care benefits.</p>
</goa-details>

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