Text

Provides consistent sizing, spacing, and colour to written content.

Props

color
GoabTextColor
Sets the text colour.
Defaults to primary.
id
string
Sets the id attribute on the element.
maxWidth
GoabTextMaxWidth
Sets the max width.
Defaults to 65ch.
size
GoabTextSize
Overrides the text size.
tag
GoabTextTextElement | GoabTextHeadingElement
The HTML element to render. Use semantic elements like 'h1'-'h6' for headings.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
color
GoabTextColor
Sets the text colour.
id
string
Sets the id attribute on the host element.
maxWidth
GoabTextMaxWidth
Sets the max width.
size
GoabTextSize
Overrides the text size.
tag
GoabTextTextElement | GoabTextHeadingElement
The HTML element to render. Use semantic elements like 'h1'-'h6' for headings.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
as
"span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5"
The HTML element to render. Use semantic elements like 'h1'-'h6' for headings.
Defaults to div.
color
"primary" | "secondary"
Sets the text colour.
Defaults to primary.
maxwidth
string | "none"
Sets the max width.
Defaults to 65ch.
size
"heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-l" | "body-m" | "body-s" | "body-xs"
Overrides the text size.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Examples

Restricted access (401)

.error-page-content {
  text-align: center;
}
.error-page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background-color: var(--goa-color-greyscale-100);
}
/* Icon scaled beyond xlarge (2.5rem cap) to match the page-scale visual weight. */
/* Tracked in icon-sizes-above-xlarge gap ticket. */
.error-page-icon goa-icon,
.error-page-icon goab-icon {
  transform: scale(1.35);
}
.error-page-underline {
  width: 6.875rem;
  height: var(--goa-space-xs);
  background-color: var(--goa-color-info-default);
}
<GoabPageBlock>
  <div className="error-page-content">
    <GoabBlock
      direction="column"
      alignment="center"
      gap="xl"
      width="100%"
      mt="3xl"
      mb="3xl"
    >
      <GoabBlock direction="column" alignment="center" gap="m" width="100%">
        <div className="error-page-icon">
          <GoabIcon role="presentation" type="warning" size="xlarge" />
        </div>
        <GoabText size="body-m" color="secondary" mt="none" mb="none">
          Error 401
        </GoabText>
        <div className="error-page-underline" aria-hidden="true" />
      </GoabBlock>

      <GoabBlock direction="column" alignment="center" gap="l" width="100%">
        <GoabText tag="h1" size="heading-l" mt="none" mb="none">
          Restricted access
        </GoabText>
        <GoabText size="body-m" mt="none" mb="none">
          We cannot provide access to this page without valid credentials. Please sign in or
          contact support at{" "}
          <GoabLink>
            <a href="mailto:cs.licensingsupport@gov.ab.ca">cs.licensingsupport@gov.ab.ca</a>
          </GoabLink>{" "}
          to request access.
        </GoabText>
      </GoabBlock>

      <GoabButton type="primary" size="compact" onClick={() => (window.location.href = "/")}>
        Go to home page
      </GoabButton>
    </GoabBlock>
  </div>
</GoabPageBlock>
goHome() {
  window.location.href = "/";
}
<goab-page-block>
  <div class="error-page-content">
    <goab-block direction="column" alignment="center" gap="xl" width="100%" mt="3xl" mb="3xl">
      <goab-block direction="column" alignment="center" gap="m" width="100%">
        <div class="error-page-icon">
          <goab-icon role="presentation" type="warning" size="xlarge"></goab-icon>
        </div>
        <goab-text size="body-m" color="secondary" mt="none" mb="none">Error 401</goab-text>
        <div class="error-page-underline" aria-hidden="true"></div>
      </goab-block>

      <goab-block direction="column" alignment="center" gap="l" width="100%">
        <goab-text tag="h1" size="heading-l" mt="none" mb="none">Restricted access</goab-text>
        <goab-text size="body-m" mt="none" mb="none">
          We cannot provide access to this page without valid credentials. Please sign in or
          contact support at
          <goab-link>
            <a href="mailto:cs.licensingsupport@gov.ab.ca">cs.licensingsupport@gov.ab.ca</a>
          </goab-link>
          to request access.
        </goab-text>
      </goab-block>

      <goab-button type="primary" size="compact" (onClick)="goHome()">Go to home page</goab-button>
    </goab-block>
  </div>
</goab-page-block>
<goa-page-block>
  <div style="text-align: center;">
    <goa-block direction="column" alignment="center" gap="xl" width="100%" mt="3xl" mb="3xl">
      <goa-block direction="column" alignment="center" gap="m" width="100%">
        <div
          style="display: flex; align-items: center; justify-content: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background-color: var(--goa-color-greyscale-100);"
        >
          <goa-icon role="presentation" type="warning" size="xlarge" style="transform: scale(1.35);"></goa-icon>
        </div>
        <goa-text size="body-m" color="secondary" mt="none" mb="none">Error 401</goa-text>
        <div
          aria-hidden="true"
          style="width: 6.875rem; height: 0.5rem; background-color: var(--goa-color-info-default);"
        ></div>
      </goa-block>

      <goa-block direction="column" alignment="center" gap="l" width="100%">
        <goa-text as="h1" size="heading-l" mt="none" mb="none">Restricted access</goa-text>
        <goa-text size="body-m" mt="none" mb="none">
          We cannot provide access to this page without valid credentials. Please sign in or
          contact support at
          <goa-link>
            <a href="mailto:cs.licensingsupport@gov.ab.ca">cs.licensingsupport@gov.ab.ca</a>
          </goa-link>
          to request access.
        </goa-text>
      </goa-block>

      <goa-button version="2" type="primary" size="compact" onclick="window.location.href='/'">Go to home page</goa-button>
    </goa-block>
  </div>
</goa-page-block>

Uses a plain h1 as the page landmark. The decorative icon and accent bar are aria-hidden. The support email is a real mailto link inside GoabLink so keyboard users can activate it. No role="alert" is applied because the ARIA alert role is reserved for dynamically inserted messages.

Page not found (404)

.error-page-content {
  text-align: center;
}
.error-page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background-color: var(--goa-color-greyscale-100);
}
/* Icon scaled beyond xlarge (2.5rem cap) to match the page-scale visual weight. */
/* Tracked in icon-sizes-above-xlarge gap ticket. */
.error-page-icon goa-icon,
.error-page-icon goab-icon {
  transform: scale(1.35);
}
.error-page-underline {
  width: 6.875rem;
  height: var(--goa-space-xs);
  background-color: var(--goa-color-info-default);
}
<GoabPageBlock>
  <div className="error-page-content">
    <GoabBlock
      direction="column"
      alignment="center"
      gap="xl"
      width="100%"
      mt="3xl"
      mb="3xl"
    >
      <GoabBlock direction="column" alignment="center" gap="m" width="100%">
        <div className="error-page-icon">
          <GoabIcon role="presentation" type="warning" size="xlarge" />
        </div>
        <GoabText size="body-m" color="secondary" mt="none" mb="none">
          Error 404
        </GoabText>
        <div className="error-page-underline" aria-hidden="true" />
      </GoabBlock>

      <GoabBlock direction="column" alignment="center" gap="l" width="100%">
        <GoabText tag="h1" size="heading-l" mt="none" mb="none">
          Page not found
        </GoabText>
        <GoabText size="body-m" mt="none" mb="none">
          The page you're looking for doesn't exist or has been moved.
        </GoabText>
      </GoabBlock>

      <GoabButton type="primary" size="compact" onClick={() => (window.location.href = "/")}>
        Go to home page
      </GoabButton>
    </GoabBlock>
  </div>
</GoabPageBlock>
goHome() {
  window.location.href = "/";
}
<goab-page-block>
  <div class="error-page-content">
    <goab-block direction="column" alignment="center" gap="xl" width="100%" mt="3xl" mb="3xl">
      <goab-block direction="column" alignment="center" gap="m" width="100%">
        <div class="error-page-icon">
          <goab-icon role="presentation" type="warning" size="xlarge"></goab-icon>
        </div>
        <goab-text size="body-m" color="secondary" mt="none" mb="none">Error 404</goab-text>
        <div class="error-page-underline" aria-hidden="true"></div>
      </goab-block>

      <goab-block direction="column" alignment="center" gap="l" width="100%">
        <goab-text tag="h1" size="heading-l" mt="none" mb="none">Page not found</goab-text>
        <goab-text size="body-m" mt="none" mb="none">The page you're looking for doesn't exist or has been moved.</goab-text>
      </goab-block>

      <goab-button type="primary" size="compact" (onClick)="goHome()">Go to home page</goab-button>
    </goab-block>
  </div>
</goab-page-block>
<goa-page-block>
  <div style="text-align: center;">
    <goa-block direction="column" alignment="center" gap="xl" width="100%" mt="3xl" mb="3xl">
      <goa-block direction="column" alignment="center" gap="m" width="100%">
        <div
          style="display: flex; align-items: center; justify-content: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background-color: var(--goa-color-greyscale-100);"
        >
          <goa-icon role="presentation" type="warning" size="xlarge" style="transform: scale(1.35);"></goa-icon>
        </div>
        <goa-text size="body-m" color="secondary" mt="none" mb="none">Error 404</goa-text>
        <div
          aria-hidden="true"
          style="width: 6.875rem; height: 0.5rem; background-color: var(--goa-color-info-default);"
        ></div>
      </goa-block>

      <goa-block direction="column" alignment="center" gap="l" width="100%">
        <goa-text as="h1" size="heading-l" mt="none" mb="none">Page not found</goa-text>
        <goa-text size="body-m" mt="none" mb="none">The page you're looking for doesn't exist or has been moved.</goa-text>
      </goa-block>

      <goa-button version="2" type="primary" size="compact" onclick="window.location.href='/'">Go to home page</goa-button>
    </goa-block>
  </div>
</goa-page-block>

Uses a plain h1 as the page landmark. The decorative icon and accent bar are aria-hidden. No role="alert" is applied because the ARIA alert role is reserved for dynamically inserted messages; a static error route does not meet that criterion.

Server problem (500)

.error-page-content {
  text-align: center;
}
.error-page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background-color: var(--goa-color-greyscale-100);
}
/* Icon scaled beyond xlarge (2.5rem cap) to match the page-scale visual weight. */
/* Tracked in icon-sizes-above-xlarge gap ticket. */
.error-page-icon goa-icon,
.error-page-icon goab-icon {
  transform: scale(1.35);
}
.error-page-underline {
  width: 6.875rem;
  height: var(--goa-space-xs);
  background-color: var(--goa-color-info-default);
}
<GoabPageBlock>
  <div className="error-page-content">
    <GoabBlock
      direction="column"
      alignment="center"
      gap="xl"
      width="100%"
      mt="3xl"
      mb="3xl"
    >
      <GoabBlock direction="column" alignment="center" gap="m" width="100%">
        <div className="error-page-icon">
          <GoabIcon role="presentation" type="warning" size="xlarge" />
        </div>
        <GoabText size="body-m" color="secondary" mt="none" mb="none">
          Error 500
        </GoabText>
        <div className="error-page-underline" aria-hidden="true" />
      </GoabBlock>

      <GoabBlock direction="column" alignment="center" gap="l" width="100%">
        <GoabText tag="h1" size="heading-l" mt="none" mb="none">
          We are experiencing a problem
        </GoabText>
        <GoabText size="body-m" mt="none" mb="none">
          We cannot load this page right now. Please try again in a few minutes. We apologize
          for the inconvenience.
        </GoabText>
      </GoabBlock>

      <GoabButton type="primary" size="compact" onClick={() => (window.location.href = "/")}>
        Go to home page
      </GoabButton>
    </GoabBlock>
  </div>
</GoabPageBlock>
goHome() {
  window.location.href = "/";
}
<goab-page-block>
  <div class="error-page-content">
    <goab-block direction="column" alignment="center" gap="xl" width="100%" mt="3xl" mb="3xl">
      <goab-block direction="column" alignment="center" gap="m" width="100%">
        <div class="error-page-icon">
          <goab-icon role="presentation" type="warning" size="xlarge"></goab-icon>
        </div>
        <goab-text size="body-m" color="secondary" mt="none" mb="none">Error 500</goab-text>
        <div class="error-page-underline" aria-hidden="true"></div>
      </goab-block>

      <goab-block direction="column" alignment="center" gap="l" width="100%">
        <goab-text tag="h1" size="heading-l" mt="none" mb="none">We are experiencing a problem</goab-text>
        <goab-text size="body-m" mt="none" mb="none">
          We cannot load this page right now. Please try again in a few minutes. We apologize for the inconvenience.
        </goab-text>
      </goab-block>

      <goab-button type="primary" size="compact" (onClick)="goHome()">Go to home page</goab-button>
    </goab-block>
  </div>
</goab-page-block>
<goa-page-block>
  <div style="text-align: center;">
    <goa-block direction="column" alignment="center" gap="xl" width="100%" mt="3xl" mb="3xl">
      <goa-block direction="column" alignment="center" gap="m" width="100%">
        <div
          style="display: flex; align-items: center; justify-content: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background-color: var(--goa-color-greyscale-100);"
        >
          <goa-icon role="presentation" type="warning" size="xlarge" style="transform: scale(1.35);"></goa-icon>
        </div>
        <goa-text size="body-m" color="secondary" mt="none" mb="none">Error 500</goa-text>
        <div
          aria-hidden="true"
          style="width: 6.875rem; height: 0.5rem; background-color: var(--goa-color-info-default);"
        ></div>
      </goa-block>

      <goa-block direction="column" alignment="center" gap="l" width="100%">
        <goa-text as="h1" size="heading-l" mt="none" mb="none">We are experiencing a problem</goa-text>
        <goa-text size="body-m" mt="none" mb="none">
          We cannot load this page right now. Please try again in a few minutes. We apologize for the inconvenience.
        </goa-text>
      </goa-block>

      <goa-button version="2" type="primary" size="compact" onclick="window.location.href='/'">Go to home page</goa-button>
    </goa-block>
  </div>
</goa-page-block>

Uses a plain h1 as the page landmark. The decorative icon and accent bar are aria-hidden. No role="alert" is applied because the ARIA alert role is reserved for dynamically inserted messages; a static error route does not meet that criterion.

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>
<GoabFormItem label="Street Address">
  <GoabInput
    name="address"
    type="text"
    value={address}
    onChange={(e) => setAddress(e.value)}
    width="100%"
  />
</GoabFormItem>
<GoabFormItem label="Suite or unit #" mt="l">
  <GoabInput
    name="suite"
    type="text"
    value={suite}
    onChange={(e) => setSuite(e.value)}
    width="100%"
  />
</GoabFormItem>
<GoabFormItem label="City or town" mt="l">
  <GoabInput
    name="city"
    type="text"
    value={city}
    onChange={(e) => setCity(e.value)}
    width="100%"
  />
</GoabFormItem>
<GoabBlock direction="row" gap="l" mt="l">
  <GoabFormItem label="Province or territory">
    <GoabDropdown
      onChange={(e) => setProvince(e.value ?? "")}
      name="province"
      value={province}
      width="100%"
    >
      <GoabDropdownItem label="Alberta" value="AB" />
      <GoabDropdownItem label="British Columbia" value="BC" />
      <GoabDropdownItem label="Manitoba" value="MB" />
      <GoabDropdownItem label="New Brunswick" value="NB" />
      <GoabDropdownItem label="Newfoundland and Labrador" value="NL" />
      <GoabDropdownItem label="Northwest Territories" value="NT" />
      <GoabDropdownItem label="Nova Scotia" value="NS" />
      <GoabDropdownItem label="Nunavut" value="NU" />
      <GoabDropdownItem label="Ontario" value="ON" />
      <GoabDropdownItem label="Prince Edward Island" value="PE" />
      <GoabDropdownItem label="Quebec" value="QC" />
      <GoabDropdownItem label="Saskatchewan" value="SK" />
      <GoabDropdownItem label="Yukon" value="YT" />
    </GoabDropdown>
  </GoabFormItem>
  <GoabFormItem label="Postal Code">
    <GoabInput
      name="postalCode"
      type="text"
      value={postalCode}
      onChange={(e) => setPostalCode(e.value)}
      width="7ch"
    />
  </GoabFormItem>
</GoabBlock>
<GoabButtonGroup alignment="start" mt="2xl">
  <GoabButton type="primary" onClick={() => {}}>
    Save and continue
  </GoabButton>
  <GoabButton type="secondary" onClick={() => {}}>
    Cancel
  </GoabButton>
</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>
<goab-form-item label="Street Address">
  <goab-input
    name="address"
    type="text"
    [formControl]="form.controls.address"
    width="100%"
  ></goab-input>
</goab-form-item>
<goab-form-item label="Suite or unit #" mt="l">
  <goab-input
    name="suite"
    type="text"
    [formControl]="form.controls.suite"
    width="100%"
  ></goab-input>
</goab-form-item>
<goab-form-item label="City or town" mt="l">
  <goab-input
    name="city"
    type="text"
    [formControl]="form.controls.city"
    width="100%"
  ></goab-input>
</goab-form-item>
<goab-block direction="row" gap="l" mt="l">
  <goab-form-item label="Province or territory">
    <goab-dropdown name="province" [formControl]="form.controls.province" width="100%">
      <goab-dropdown-item label="Alberta" value="AB"></goab-dropdown-item>
      <goab-dropdown-item label="British Columbia" value="BC"></goab-dropdown-item>
      <goab-dropdown-item label="Manitoba" value="MB"></goab-dropdown-item>
      <goab-dropdown-item label="New Brunswick" value="NB"></goab-dropdown-item>
      <goab-dropdown-item
        label="Newfoundland and Labrador"
        value="NL"
      ></goab-dropdown-item>
      <goab-dropdown-item label="Northwest Territories" value="NT"></goab-dropdown-item>
      <goab-dropdown-item label="Nova Scotia" value="NS"></goab-dropdown-item>
      <goab-dropdown-item label="Nunavut" value="NU"></goab-dropdown-item>
      <goab-dropdown-item label="Ontario" value="ON"></goab-dropdown-item>
      <goab-dropdown-item label="Prince Edward Island" value="PE"></goab-dropdown-item>
      <goab-dropdown-item label="Quebec" value="QC"></goab-dropdown-item>
      <goab-dropdown-item label="Saskatchewan" value="SK"></goab-dropdown-item>
      <goab-dropdown-item label="Yukon" value="YT"></goab-dropdown-item>
    </goab-dropdown>
  </goab-form-item>
  <goab-form-item label="Postal Code">
    <goab-input
      name="postalCode"
      type="text"
      [formControl]="form.controls.postalCode"
      width="7ch"
    ></goab-input>
  </goab-form-item>
</goab-block>
<goab-button-group alignment="start" mt="2xl">
  <goab-button type="primary" (onClick)="onClick()">Save and continue</goab-button>
  <goab-button type="secondary" (onClick)="onClick()">Cancel</goab-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" width="100%">
      <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>

Ask a user for direct deposit information

const [bankNumber, setBankNumber] = useState("");
const [transitNumber, setTransitNumber] = useState("");
const [accountNumber, setAccountNumber] = useState("");
<GoabText tag="h1" size="heading-l" mt="none" mb="m">
  Direct deposit information
</GoabText>
<GoabText tag="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>
  <GoabFormItem label="Bank or Institution number" helpText="3-4 digits in length">
    <GoabInput
      maxLength={4}
      name="bankNumber"
      onChange={(e) => setBankNumber(e.value)}
      value={bankNumber}
      ariaLabel="bankNumber"
      width="88px"
    />
  </GoabFormItem>
  <GoabFormItem
    label="Branch or Transit number"
    helpText="5 digits in length"
    mt="l"
  >
    <GoabInput
      maxLength={5}
      name="transitNumber"
      onChange={(e) => setTransitNumber(e.value)}
      value={transitNumber}
      ariaLabel="transitNumber"
      width="143px"
    />
  </GoabFormItem>
  <GoabFormItem label="Account number" helpText="3-12 digits in length" mt="l">
    <GoabInput
      maxLength={12}
      name="accountNumber"
      value={accountNumber}
      onChange={(e) => setAccountNumber(e.value)}
      ariaLabel="accountNumber"
    />
  </GoabFormItem>
</form>
<GoabDetails
  heading="Where can I find this information on a personal cheque?"
  mt="l"
>
  <GoabText tag="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>

<GoabButton type="submit" mt="2xl">
  Save and continue
</GoabButton>
form!: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    bankNumber: [""],
    transitNumber: [""],
    accountNumber: [""],
  });
}
<goab-text tag="h1" size="heading-l" mt="none" mb="m"
  >Direct deposit information</goab-text
>
<goab-text tag="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">
  <goab-form-item label="Bank or Institution number" helpText="3-4 digits in length">
    <goab-input
      [maxLength]="4"
      name="bankNumber"
      formControlName="bankNumber"
      ariaLabel="bankNumber"
      width="88px"
    >
    </goab-input>
  </goab-form-item>
  <goab-form-item label="Branch or Transit number" helpText="5 digits in length" mt="l">
    <goab-input
      [maxLength]="5"
      name="transitNumber"
      formControlName="transitNumber"
      ariaLabel="transitNumber"
      width="143px"
    >
    </goab-input>
  </goab-form-item>
  <goab-form-item label="Account number" helpText="3-12 digits in length" mt="l">
    <goab-input
      [maxLength]="12"
      name="accountNumber"
      formControlName="accountNumber"
      ariaLabel="accountNumber"
    >
    </goab-input>
  </goab-form-item>
</form>
<goab-details heading="Where can I find this information on a personal cheque?" mt="l">
  <goab-text tag="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>

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

Card grid

<GoabGrid gap="xl" minChildWidth="320px">
  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Waitlist submission</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Enter and maintain information about the households waiting for affordable
      housing with your organization.
    </GoabText>
  </GoabContainer>

  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Lodge assistance program</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Keep track of the individuals who are placed in lodges and may qualify for the
      Lodge Assistance Program subsidy.
    </GoabText>
  </GoabContainer>

  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Education Support</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Explore educational resources, enroll in courses, and track your academic
      progress effortlessly.
    </GoabText>
  </GoabContainer>

  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Social Assistance</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Learn about available support programs, apply for financial aid, and access
      community resources.
    </GoabText>
  </GoabContainer>

  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Employment Opportunity</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Search for job openings, access career development tools, and receive
      employment-related updates.
    </GoabText>
  </GoabContainer>

  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Housing Assistance</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Find affordable housing options, apply for housing subsidies, and report
      maintenance issues seamlessly.
    </GoabText>
  </GoabContainer>
</GoabGrid>
<goab-grid gap="xl" minChildWidth="320px">
  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Waitlist submission</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Enter and maintain information about the households waiting for affordable housing
      with your organization.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Lodge assistance program</a>
    </goab-link>
    <goab-text 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>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Education Support</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Explore educational resources, enroll in courses, and track your academic progress
      effortlessly.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Social Assistance</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Learn about available support programs, apply for financial aid, and access
      community resources.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Employment Opportunity</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Search for job openings, access career development tools, and receive
      employment-related updates.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Housing Assistance</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Find affordable housing options, apply for housing subsidies, and report maintenance
      issues seamlessly.
    </goab-text>
  </goab-container>
</goab-grid>
<goa-grid gap="xl" minchildwidth="320px">
  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Waitlist submission</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Enter and maintain information about the households waiting for affordable housing
      with your organization.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Lodge assistance program</a>
    </goa-link>
    <goa-text 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-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Education Support</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Explore educational resources, enroll in courses, and track your academic progress
      effortlessly.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Social Assistance</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Learn about available support programs, apply for financial aid, and access
      community resources.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Employment Opportunity</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Search for job openings, access career development tools, and receive
      employment-related updates.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Housing Assistance</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Find affordable housing options, apply for housing subsidies, and report maintenance
      issues seamlessly.
    </goa-text>
  </goa-container>
</goa-grid>

Display user information

const handleAddToCalendar = () => {
  console.log("Add to calendar clicked");
};
<GoabContainer>
  <GoabText tag="span" size="body-m" color="secondary" mt="none" mb="none">
    Housing Advisor
  </GoabText>
  <GoabText size="heading-m" mt="none" mb="s">
    Tracy Hero
  </GoabText>
  <GoabBlock direction="row" gap="s">
    <GoabBlock direction="column" gap="m">
      <GoabText tag="span" size="heading-xs" mt="none" mb="none">
        Email
      </GoabText>
      <GoabText tag="span" size="heading-xs" mt="none" mb="none">
        Phone
      </GoabText>
    </GoabBlock>
    <GoabBlock direction="column" gap="m">
      <GoabText tag="span" size="body-m" mt="none" mb="none">
        tracyhero@email.com
      </GoabText>
      <GoabText tag="span" size="body-m" mt="none" mb="none">
        283-203-4921
      </GoabText>
    </GoabBlock>
  </GoabBlock>
</GoabContainer>

<GoabContainer
  type="non-interactive"
  accent="thick"
  heading="Upcoming important due dates"
  actions={
    <GoabButton
      type="tertiary"
      size="compact"
      leadingIcon="calendar"
      onClick={handleAddToCalendar}
    >
      Add to calendar
    </GoabButton>
  }
>
  <GoabTable width="100%" striped>
    <tbody>
      <tr>
        <td>Business plan submission</td>
        <td style={{ textAlign: "right" }}>June 30, 2024</td>
      </tr>
      <tr>
        <td>Annual review</td>
        <td style={{ textAlign: "right" }}>October 3, 2024</td>
      </tr>
      <tr>
        <td>Application submission</td>
        <td style={{ textAlign: "right" }}>December 20, 2024</td>
      </tr>
      <tr>
        <td>Application review</td>
        <td style={{ textAlign: "right" }}>January 3, 2025</td>
      </tr>
    </tbody>
  </GoabTable>
</GoabContainer>
onAddToCalendar(): void {
  console.log("Add to calendar clicked");
}
<goab-container>
  <goab-text tag="span" size="body-m" color="secondary" mt="none" mb="none"
    >Housing Advisor</goab-text
  >
  <goab-text size="heading-m" mt="none" mb="s">Tracy Hero</goab-text>
  <goab-block direction="row" gap="s">
    <goab-block direction="column" gap="m">
      <goab-text tag="span" size="heading-xs" mt="none" mb="none">Email</goab-text>
      <goab-text tag="span" size="heading-xs" mt="none" mb="none">Phone</goab-text>
    </goab-block>
    <goab-block direction="column" gap="m">
      <goab-text tag="span" size="body-m" mt="none" mb="none"
        >tracyhero&#64;email.com</goab-text
      >
      <goab-text tag="span" size="body-m" mt="none" mb="none">283-203-4921</goab-text>
    </goab-block>
  </goab-block>
</goab-container>

<goab-container type="non-interactive" accent="thick">
  <div slot="title">Upcoming important due dates</div>
  <div slot="actions">
    <goab-button
      type="tertiary"
      size="compact"
      leadingIcon="calendar"
      (onClick)="onAddToCalendar()"
    >
      Add to calendar
    </goab-button>
  </div>
  <goab-table width="100%" [striped]="true">
    <tbody>
      <tr>
        <td>Business plan submission</td>
        <td style="text-align: right">June 30, 2024</td>
      </tr>
      <tr>
        <td>Annual review</td>
        <td style="text-align: right">October 3, 2024</td>
      </tr>
      <tr>
        <td>Application submission</td>
        <td style="text-align: right">December 20, 2024</td>
      </tr>
      <tr>
        <td>Application review</td>
        <td style="text-align: right">January 3, 2025</td>
      </tr>
    </tbody>
  </goab-table>
</goab-container>
const calendarBtn = document.getElementById("calendar-btn");
calendarBtn.addEventListener("_click", () => {
  console.log("Add to calendar clicked");
});
<goa-container>
  <goa-text as="span" size="body-m" color="secondary" mt="none" mb="none"
    >Housing Advisor</goa-text
  >
  <goa-text size="heading-m" mt="none" mb="s">Tracy Hero</goa-text>
  <goa-block direction="row" gap="s">
    <goa-block direction="column" gap="m">
      <goa-text as="span" size="heading-xs" mt="none" mb="none">Email</goa-text>
      <goa-text as="span" size="heading-xs" mt="none" mb="none">Phone</goa-text>
    </goa-block>
    <goa-block direction="column" gap="m">
      <goa-text as="span" size="body-m" mt="none" mb="none">tracyhero@email.com</goa-text>
      <goa-text as="span" size="body-m" mt="none" mb="none">283-203-4921</goa-text>
    </goa-block>
  </goa-block>
</goa-container>

<goa-container type="non-interactive" accent="thick">
  <div slot="title">Upcoming important due dates</div>
  <div slot="actions">
    <goa-button
      version="2"
      id="calendar-btn"
      type="tertiary"
      size="compact"
      leadingicon="calendar"
    >
      Add to calendar
    </goa-button>
  </div>
  <goa-table version="2" width="100%" striped="true">
    <table style="width: 100%">
      <tbody>
        <tr>
          <td>Business plan submission</td>
          <td style="text-align: right">June 30, 2024</td>
        </tr>
        <tr>
          <td>Annual review</td>
          <td style="text-align: right">October 3, 2024</td>
        </tr>
        <tr>
          <td>Application submission</td>
          <td style="text-align: right">December 20, 2024</td>
        </tr>
        <tr>
          <td>Application review</td>
          <td style="text-align: right">January 3, 2025</td>
        </tr>
      </tbody>
    </table>
  </goa-table>
</goa-container>

Filter data in a table

const [typedChips, setTypedChips] = useState<string[]>([]);
const [inputValue, setInputValue] = useState("");
const [inputError, setInputError] = useState("");
const errorEmpty = "Empty filter";
const errorDuplicate = "Enter a unique filter";

const data = useMemo(
  () => [
    {
      status: { type: "information" as GoabBadgeType, text: "In progress" },
      name: "Ivan Schmidt",
      id: "7838576954",
    },
    {
      status: { type: "success" as GoabBadgeType, text: "Completed" },
      name: "Luz Lakin",
      id: "8576953364",
    },
    {
      status: { type: "information" as GoabBadgeType, text: "In progress" },
      name: "Keith McGlynn",
      id: "9846041345",
    },
    {
      status: { type: "success" as GoabBadgeType, text: "Completed" },
      name: "Melody Frami",
      id: "7385256175",
    },
    {
      status: { type: "important" as GoabBadgeType, text: "Updated" },
      name: "Frederick Skiles",
      id: "5807570418",
    },
    {
      status: { type: "success" as GoabBadgeType, text: "Completed" },
      name: "Dana Pfannerstill",
      id: "5736306857",
    },
  ],
  [],
);

const [dataFiltered, setDataFiltered] = useState(data);

const handleInputChange = (detail: GoabInputOnChangeDetail) => {
  const newValue = detail.value.trim();
  setInputValue(newValue);
};

const handleInputKeyPress = (detail: GoabInputOnKeyPressDetail) => {
  if (detail.key === "Enter") {
    applyFilter();
  }
};

const applyFilter = () => {
  if (inputValue === "") {
    setInputError(errorEmpty);
    return;
  }
  if (typedChips.length > 0 && typedChips.includes(inputValue)) {
    setInputError(errorDuplicate);
    return;
  }
  setTypedChips([...typedChips, inputValue]);
  setTimeout(() => {
    setInputValue("");
  }, 0);
  setInputError("");
};

const removeTypedChip = (chip: string) => {
  setTypedChips(typedChips.filter((c) => c !== chip));
  setInputError("");
};

const checkNested = useCallback((obj: object, chip: string): boolean => {
  return Object.values(obj).some((value) =>
    typeof value === "object" && value !== null
      ? checkNested(value, chip)
      : typeof value === "string" && value.toLowerCase().includes(chip.toLowerCase()),
  );
}, []);

const getFilteredData = useCallback(
  (typedChips: string[]) => {
    if (typedChips.length === 0) {
      return data;
    }
    return data.filter((item: object) =>
      typedChips.every((chip) => checkNested(item, chip)),
    );
  },
  [checkNested, data],
);

useEffect(() => {
  setDataFiltered(getFilteredData(typedChips));
}, [getFilteredData, typedChips]);
<GoabFormItem id="filterChipInput" error={inputError} mb="m">
  <GoabBlock gap="xs" direction="row" alignment="start" width="100%">
    <div style={{ flex: 1 }}>
      <GoabInput
        name="filterChipInput"
        aria-labelledby="filterChipInput"
        value={inputValue}
        leadingIcon="search"
        width="100%"
        onChange={handleInputChange}
        onKeyPress={handleInputKeyPress}
      />
    </div>
    <GoabButton type="secondary" onClick={applyFilter} leadingIcon="filter">
      Filter
    </GoabButton>
  </GoabBlock>
</GoabFormItem>

{typedChips.length > 0 && (
  <div>
    <GoabText tag="span" color="secondary" mb="xs" mr="xs">
      Filter:
    </GoabText>
    {typedChips.map((typedChip, index) => (
      <GoabFilterChip
        key={index}
        content={typedChip}
        mb="xs"
        mr="xs"
        onClick={() => removeTypedChip(typedChip)}
      />
    ))}
    <GoabButton
      type="tertiary"
      size="compact"
      mb="xs"
      onClick={() => setTypedChips([])}
    >
      Clear all
    </GoabButton>
  </div>
)}

<GoabTable width="100%">
  <thead>
    <tr>
      <th>Status</th>
      <th>Name</th>
      <th className="goa-table-number-header">ID Number</th>
    </tr>
  </thead>
  <tbody>
    {dataFiltered.map((item) => (
      <tr key={item.id}>
        <td>
          <GoabBadge
            type={item.status.type}
            content={item.status.text}
            icon={false}
          />
        </td>
        <td>{item.name}</td>
        <td className="goa-table-number-column">{item.id}</td>
      </tr>
    ))}
  </tbody>
</GoabTable>

{dataFiltered.length === 0 && data.length > 0 && (
  <GoabBlock mt="l" mb="l">
    No results found
  </GoabBlock>
)}
typedChips: string[] = [];
inputValue = "";
inputError = "";
readonly errorEmpty = "Empty filter";
readonly errorDuplicate = "Enter a unique filter";

readonly data: DataItem[] = [
  {
    status: { type: "information", text: "In progress" },
    name: "Ivan Schmidt",
    id: "7838576954",
  },
  {
    status: { type: "success", text: "Completed" },
    name: "Luz Lakin",
    id: "8576953364",
  },
  {
    status: { type: "information", text: "In progress" },
    name: "Keith McGlynn",
    id: "9846041345",
  },
  {
    status: { type: "success", text: "Completed" },
    name: "Melody Frami",
    id: "7385256175",
  },
  {
    status: { type: "important", text: "Updated" },
    name: "Frederick Skiles",
    id: "5807570418",
  },
  {
    status: { type: "success", text: "Completed" },
    name: "Dana Pfannerstill",
    id: "5736306857",
  },
];

dataFiltered = this.getFilteredData(this.typedChips);

handleInputChange(detail: GoabInputOnChangeDetail): void {
  const newValue = detail.value.trim();
  this.inputValue = newValue;
}

handleInputKeyPress(detail: GoabInputOnKeyPressDetail): void {
  if (detail.key === "Enter") {
    this.applyFilter();
  }
}

applyFilter(): void {
  if (this.inputValue === "") {
    this.inputError = this.errorEmpty;
    return;
  }
  if (this.typedChips.includes(this.inputValue)) {
    this.inputError = this.errorDuplicate;
    return;
  }
  this.typedChips = [...this.typedChips, this.inputValue];
  this.inputValue = "";
  this.inputError = "";
  this.dataFiltered = this.getFilteredData(this.typedChips);
}

removeTypedChip(chip: string): void {
  this.typedChips = this.typedChips.filter((c) => c !== chip);
  this.dataFiltered = this.getFilteredData(this.typedChips);
  this.inputError = "";
}

removeAllTypedChips(): void {
  this.typedChips = [];
  this.dataFiltered = this.getFilteredData(this.typedChips);
  this.inputError = "";
}

getFilteredData(typedChips: string[]): DataItem[] {
  if (typedChips.length === 0) {
    return this.data;
  }
  return this.data.filter((item) =>
    typedChips.every((chip) => this.checkNested(item, chip)),
  );
}

checkNested(obj: object, chip: string): boolean {
  return Object.values(obj).some((value) =>
    typeof value === "object" && value !== null
      ? this.checkNested(value, chip)
      : typeof value === "string" && value.toLowerCase().includes(chip.toLowerCase()),
  );
}
<goab-form-item id="filterChipInput" [error]="inputError" mb="m">
  <goab-block gap="xs" direction="row" alignment="start" width="100%">
    <div style="flex: 1">
      <goab-input
        name="filterChipInput"
        aria-labelledby="filterChipInput"
        [value]="inputValue"
        leadingIcon="search"
        width="100%"
        (onChange)="handleInputChange($event)"
        (onKeyPress)="handleInputKeyPress($event)"
      >
      </goab-input>
    </div>
    <goab-button type="secondary" (onClick)="applyFilter()" leadingIcon="filter">
      Filter
    </goab-button>
  </goab-block>
</goab-form-item>

@if (typedChips.length > 0) {
<ng-container>
  <goab-text tag="span" color="secondary" mb="xs" mr="xs"> Filter: </goab-text>
  @for (typedChip of typedChips; track typedChip; let index = $index) {
  <goab-filter-chip
    [content]="typedChip"
    mb="xs"
    mr="xs"
    (onClick)="removeTypedChip(typedChip)"
  >
  </goab-filter-chip>
  }
  <goab-button type="tertiary" size="compact" mb="xs" (onClick)="removeAllTypedChips()">
    Clear all
  </goab-button>
</ng-container>
}

<goab-table width="100%">
  <thead>
    <tr>
      <th>Status</th>
      <th>Name</th>
      <th class="goa-table-number-header">ID Number</th>
    </tr>
  </thead>
  <tbody>
    @for (item of dataFiltered; track $index) {
    <tr>
      <td>
        <goab-badge
          [type]="item.status.type"
          [content]="item.status.text"
          [icon]="false"
        ></goab-badge>
      </td>
      <td>{{ item.name }}</td>
      <td class="goa-table-number-column">{{ item.id }}</td>
    </tr>
    }
  </tbody>
</goab-table>

@if (dataFiltered.length === 0 && data.length > 0) {
<goab-block mt="l" mb="l"> No results found </goab-block>
}
const filterInput = document.getElementById("filter-input");
const filterBtn = document.getElementById("filter-btn");
const filterFormItem = document.getElementById("filter-form-item");
const chipsContainer = document.getElementById("chips-container");
const chipsList = document.getElementById("chips-list");
const clearAllBtn = document.getElementById("clear-all-btn");
const tableRows = document.querySelectorAll("tbody tr");

let typedChips = [];

function filterTable() {
  tableRows.forEach((row) => {
    const badge = row.querySelector("goa-badge");
    const badgeText = badge ? badge.getAttribute("content") || "" : "";
    const text = (row.textContent + " " + badgeText).toLowerCase();
    const matches =
      typedChips.length === 0 ||
      typedChips.every((chip) => text.includes(chip.toLowerCase()));
    row.style.display = matches ? "" : "none";
  });
}

function renderChips() {
  chipsList.innerHTML = "";
  typedChips.forEach((chip) => {
    const filterChip = document.createElement("goa-filter-chip");
    filterChip.setAttribute("version", "2");
    filterChip.setAttribute("content", chip);
    filterChip.setAttribute("mb", "xs");
    filterChip.setAttribute("mr", "xs");
    filterChip.addEventListener("_click", () => removeChip(chip));
    chipsList.appendChild(filterChip);
  });
  chipsContainer.style.display = typedChips.length > 0 ? "block" : "none";
  filterTable();
}

function applyFilter() {
  const value = filterInput.value.trim();
  if (value === "") {
    filterFormItem.setAttribute("error", "Empty filter");
    return;
  }
  if (typedChips.includes(value)) {
    filterFormItem.setAttribute("error", "Enter a unique filter");
    return;
  }
  typedChips.push(value);
  filterInput.value = "";
  filterFormItem.removeAttribute("error");
  renderChips();
}

function removeChip(chip) {
  typedChips = typedChips.filter((c) => c !== chip);
  renderChips();
}

filterBtn.addEventListener("_click", applyFilter);
clearAllBtn.addEventListener("_click", () => {
  typedChips = [];
  renderChips();
});
<goa-form-item version="2" id="filter-form-item" mb="m">
  <goa-block gap="xs" direction="row" alignment="center" width="100%">
    <div style="flex: 1">
      <goa-input
        version="2"
        id="filter-input"
        name="filterChipInput"
        leadingicon="search"
        width="100%"
      >
      </goa-input>
    </div>
    <goa-button version="2" id="filter-btn" type="secondary" leadingicon="filter">
      Filter
    </goa-button>
  </goa-block>
</goa-form-item>

<div id="chips-container" style="display: none">
  <goa-text as="span" color="secondary" mb="xs" mr="xs">Filter:</goa-text>
  <span id="chips-list"></span>
  <goa-button version="2" id="clear-all-btn" type="tertiary" size="compact" mb="xs">
    Clear all
  </goa-button>
</div>

<goa-table version="2" width="100%" mt="s">
  <table style="width: 100%">
    <thead>
      <tr>
        <th>Status</th>
        <th>Name</th>
        <th class="goa-table-number-header">ID Number</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <goa-badge
            version="2"
            type="information"
            content="In progress"
            icon="false"
          ></goa-badge>
        </td>
        <td>Ivan Schmidt</td>
        <td class="goa-table-number-column">7838576954</td>
      </tr>
      <tr>
        <td>
          <goa-badge
            version="2"
            type="success"
            content="Completed"
            icon="false"
          ></goa-badge>
        </td>
        <td>Luz Lakin</td>
        <td class="goa-table-number-column">8576953364</td>
      </tr>
      <tr>
        <td>
          <goa-badge
            version="2"
            type="information"
            content="In progress"
            icon="false"
          ></goa-badge>
        </td>
        <td>Keith McGlynn</td>
        <td class="goa-table-number-column">9846041345</td>
      </tr>
      <tr>
        <td>
          <goa-badge
            version="2"
            type="success"
            content="Completed"
            icon="false"
          ></goa-badge>
        </td>
        <td>Melody Frami</td>
        <td class="goa-table-number-column">7385256175</td>
      </tr>
      <tr>
        <td>
          <goa-badge
            version="2"
            type="important"
            content="Updated"
            icon="false"
          ></goa-badge>
        </td>
        <td>Frederick Skiles</td>
        <td class="goa-table-number-column">5807570418</td>
      </tr>
      <tr>
        <td>
          <goa-badge
            version="2"
            type="success"
            content="Completed"
            icon="false"
          ></goa-badge>
        </td>
        <td>Dana Pfannerstill</td>
        <td class="goa-table-number-column">5736306857</td>
      </tr>
    </tbody>
  </table>
</goa-table>

Types

Tip
Use color='secondary' for supporting text that's less prominent than the main content.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

Screen Readers

Warning
Use semantic heading tags (h1-h5) with GoabText for proper document structure and screen reader navigation.
View old component docs