Tabs

Let users navigate between related sections of content, displaying one section at a time.

Props

initialtab
number
The initially active tab (1-based index). If not set, the first tab is active.
Defaults to -1.
testId
string
Sets a data-testid attribute for automated testing.
variant
default | segmented
Visual style variant. "segmented" shows pill-style tabs with animation.
Defaults to default.
orientation
auto | horizontal
Tab layout orientation. "auto" stacks vertically on mobile, "horizontal" keeps horizontal on all screen sizes.
Defaults to auto.
navigation
hash | none
Defaults to hash.

Events

onChange
(event: Event) => void
_change
CustomEvent
 Examples

Set a specific tab to be active

const review = [0, 1, 2, 3];
  const complete = [0, 1];
<GoabxTabs initialTab={2}>
      <GoabTab heading="All">
        <GoabxTable width="100%">
          <thead>
            <tr>
              <th>Status</th>
              <th>Text</th>
              <th className="goa-table-number-header">Number</th>
              <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
            </tr>
          </thead>
          <tbody>
            {review.map((i) => (
              <tr key={`review-${i}`}>
                <td>
                  <GoabxBadge type="important" content="Review pending" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                </td>
              </tr>
            ))}
            {complete.map((i) => (
              <tr key={`complete-${i}`}>
                <td>
                  <GoabxBadge type="information" content="Complete" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                </td>
              </tr>
            ))}
          </tbody>
        </GoabxTable>
      </GoabTab>
      <GoabTab heading={<>Review pending<GoabxBadge type="important" content="4" icon={false} /></>}>
        <GoabxTable width="100%">
          <thead>
            <tr>
              <th>Status</th>
              <th>Text</th>
              <th className="goa-table-number-header">Number</th>
              <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
            </tr>
          </thead>
          <tbody>
            {review.map((i) => (
              <tr key={i}>
                <td>
                  <GoabxBadge type="important" content="Review pending" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                </td>
              </tr>
            ))}
          </tbody>
        </GoabxTable>
      </GoabTab>
      <GoabTab heading={<>Complete<GoabxBadge type="information" content="338" icon={false} /></>}>
        <GoabxTable width="100%">
          <thead>
            <tr>
              <th>Status</th>
              <th>Text</th>
              <th className="goa-table-number-header">Number</th>
              <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
            </tr>
          </thead>
          <tbody>
            {complete.map((i) => (
              <tr key={i}>
                <td>
                  <GoabxBadge type="information" content="Complete" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                </td>
              </tr>
            ))}
          </tbody>
        </GoabxTable>
      </GoabTab>
    </GoabxTabs>
review = [0, 1, 2, 3];
  complete = [0, 1];
<goabx-tabs [initialTab]="2">
  <goab-tab heading="All">
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of review; track $index) {
        <tr>
          <td>
            <goabx-badge type="important" content="Review pending"></goabx-badge>
          </td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td>
            <goabx-button type="tertiary" size="compact">Action</goabx-button>
          </td>
        </tr>
        } @for (i of complete; track $index) {
        <tr>
          <td>
            <goabx-badge type="information" content="Complete"></goabx-badge>
          </td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td>
            <goabx-button type="tertiary" size="compact">Action</goabx-button>
          </td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
  <goab-tab [heading]="reviewPending">
    <ng-template #reviewPending
      >Review pending<goabx-badge
        type="important"
        content="4"
        [icon]="false"
      ></goabx-badge
    ></ng-template>
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of review; track $index) {
        <tr>
          <td>
            <goabx-badge type="important" content="Review pending"></goabx-badge>
          </td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td>
            <goabx-button type="tertiary" size="compact">Action</goabx-button>
          </td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
  <goab-tab [heading]="completeTemplate">
    <ng-template #completeTemplate
      >Complete<goabx-badge type="information" content="338" [icon]="false"></goabx-badge
    ></ng-template>
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of complete; track $index) {
        <tr>
          <td>
            <goabx-badge type="information" content="Complete"></goabx-badge>
          </td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td>
            <goabx-button type="tertiary" size="compact">Action</goabx-button>
          </td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
</goabx-tabs>
<goa-tabs version="2" initialtab="2">
  <goa-tab>
    <div slot="heading">All</div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
  <goa-tab>
    <div slot="heading">Review pending<goa-badge version="2" type="important" content="4" icon="false"></goa-badge></div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
  <goa-tab>
    <div slot="heading">Complete<goa-badge version="2" type="information" content="338" icon="false"></goa-badge></div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
</goa-tabs>

Show different views of data in a table

const review = [0, 1, 2, 3];
  const complete = [0, 1];
<GoabxTabs initialTab={1}>
          <GoabTab heading="All">
            <GoabxTable width="100%">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Text</th>
                  <th className="goa-table-number-header">Number</th>
                  <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
                </tr>
              </thead>
              <tbody>
                {review.map((i) => (
                  <tr key={`review-${i}`}>
                    <td>
                      <GoabxBadge type="important" content="Review pending" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
                {complete.map((i) => (
                  <tr key={`complete-${i}`}>
                    <td>
                      <GoabxBadge type="information" content="Complete" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabxTable>
          </GoabTab>
          <GoabTab
            heading={
                Review pending
                <GoabxBadge type="important" content="4" icon={false} />
            }
          >
            <GoabxTable width="100%">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Text</th>
                  <th className="goa-table-number-header">Number</th>
                  <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
                </tr>
              </thead>
              <tbody>
                {review.map((i) => (
                  <tr key={i}>
                    <td>
                      <GoabxBadge type="important" content="Review pending" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabxTable>
          </GoabTab>
          <GoabTab
            heading={
              <>
                Complete
                <GoabxBadge type="information" content="338" icon={false} />
              </>
            }
          >
            <GoabxTable width="100%">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Text</th>
                  <th className="goa-table-number-header">Number</th>
                  <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
                </tr>
              </thead>
              <tbody>
                {complete.map((i) => (
                  <tr key={i}>
                    <td>
                      <GoabxBadge type="information" content="Complete" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabxTable>
          </GoabTab>
    </GoabxTabs>
reviewItems = [0, 1, 2, 3];
  completeItems = [0, 1];
<goabx-tabs>
  <goab-tab heading="All">
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of reviewItems; track $index) {
        <tr>
          <td><goabx-badge type="important" content="Review pending"></goabx-badge></td>
          <td>Lorem ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
        }
        @for (i of completeItems; track $index) {
        <tr>
          <td><goabx-badge type="information" content="Complete"></goabx-badge></td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
  <goab-tab [heading]="reviewPending">
    <ng-template #reviewPending>Review pending<goabx-badge type="important" content="4" [icon]="false"></goabx-badge></ng-template>
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of reviewItems; track $index) {
        <tr>
          <td><goabx-badge type="important" content="Review pending"></goabx-badge></td>
          <td>Lorem ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
  <goab-tab [heading]="completeTab">
    <ng-template #completeTab>Complete<goabx-badge type="information" content="338" [icon]="false"></goabx-badge></ng-template>
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of completeItems; track $index) {
        <tr>
          <td><goabx-badge type="information" content="Complete"></goabx-badge></td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
</goabx-tabs>
<goa-tabs version="2">
  <goa-tab>
    <div slot="heading">All</div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
  <goa-tab>
    <div slot="heading">Review pending<goa-badge version="2" type="important" content="4" icon="false"></goa-badge></div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
  <goa-tab>
    <div slot="heading">Complete<goa-badge version="2" type="information" content="338" icon="false"></goa-badge></div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
</goa-tabs>

Workspace

Preview not available
No React code available

Content

ContentContentContent
Don't
Don't truncate tab labels - use short labels instead.
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.