Show a simple progress indicator on a question page with multiple questions

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

<GoabText tag="h3" size="body-m" mt="xl" mb="none" color="secondary">
  Step 1 of 5
</GoabText>
<GoabText tag="h2" mt="xs" mb="xl">
  Personal information
</GoabText>

<GoabFormItem label="What is your name?">
  <GoabInput
    onChange={() => {}}
    name="name"
    ariaLabel="what is your name?"
    width="50ch"
  />
</GoabFormItem>

<GoabFormItem label="What is your phone number?" mt="l">
  <GoabInput
    onChange={() => {}}
    name="phone-number"
    ariaLabel="what is your phone number?"
    leadingContent="+1"
  />
</GoabFormItem>

<GoabFormItem label="What is your home postal code?" mt="l">
  <GoabInput
    onChange={() => {}}
    name="postal-code"
    width="14ch"
    ariaLabel="what is your home postal code"
  />
</GoabFormItem>

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

onChange(event: GoabInputOnChangeDetail): void {
  console.log("Value:", event.value);
}

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

<goab-text tag="h3" size="body-m" mt="xl" mb="none" color="secondary"
  >Step 1 of 5</goab-text
>
<goab-text tag="h2" mt="xs" mb="xl">Personal information</goab-text>

<goab-form-item label="What is your name?">
  <goab-input
    (onChange)="onChange($event)"
    name="name"
    ariaLabel="what is your name?"
    width="50ch"
  ></goab-input>
</goab-form-item>

<goab-form-item label="What is your phone number?" mt="l">
  <goab-input
    (onChange)="onChange($event)"
    name="phone-number"
    ariaLabel="what is your phone number?"
    leadingContent="+1"
  ></goab-input>
</goab-form-item>

<goab-form-item label="What is your home postal code?" mt="l">
  <goab-input
    (onChange)="onChange($event)"
    name="postal-code"
    width="14ch"
    ariaLabel="what is your home postal code"
  ></goab-input>
</goab-form-item>

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

document.querySelectorAll("goa-input").forEach((input) => {
  input.addEventListener("_change", (e) => {
    console.log(`${e.target.name}:`, e.detail.value);
  });
});

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

<goa-text as="h3" size="body-m" mt="xl" mb="none" color="secondary">Step 1 of 5</goa-text>
<goa-text as="h2" mt="xs" mb="xl">Personal information</goa-text>

<goa-form-item version="2" label="What is your name?">
  <goa-input
    version="2"
    name="name"
    aria-label="what is your name?"
    width="50ch"
  ></goa-input>
</goa-form-item>

<goa-form-item version="2" label="What is your phone number?" mt="l">
  <goa-input version="2" name="phone-number" aria-label="what is your phone number?">
    <div slot="leadingContent">+1</div>
  </goa-input>
</goa-form-item>

<goa-form-item version="2" label="What is your home postal code?" mt="l">
  <goa-input
    version="2"
    name="postal-code"
    width="14ch"
    aria-label="what is your home postal code"
  ></goa-input>
</goa-form-item>

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