Back to all examples

Set a specific tab to be active

ReactAngularWeb Components
const review = [0, 1, 2, 3];
  const complete = [0, 1];
<GoabTabs initialTab={2}>
      <GoabTab heading="All">
        <GoabTable 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>
                  <GoabBadge type="important" content="Review pending" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabButton type="tertiary" size="compact">Action</GoabButton>
                </td>
              </tr>
            ))}
            {complete.map((i) => (
              <tr key={`complete-${i}`}>
                <td>
                  <GoabBadge type="information" content="Complete" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabButton type="tertiary" size="compact">Action</GoabButton>
                </td>
              </tr>
            ))}
          </tbody>
        </GoabTable>
      </GoabTab>
      <GoabTab heading={<>Review pending<GoabBadge type="important" content="4" icon={false} /></>}>
        <GoabTable 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>
                  <GoabBadge type="important" content="Review pending" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabButton type="tertiary" size="compact">Action</GoabButton>
                </td>
              </tr>
            ))}
          </tbody>
        </GoabTable>
      </GoabTab>
      <GoabTab heading={<>Complete<GoabBadge type="information" content="338" icon={false} /></>}>
        <GoabTable 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>
                  <GoabBadge type="information" content="Complete" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabButton type="tertiary" size="compact">Action</GoabButton>
                </td>
              </tr>
            ))}
          </tbody>
        </GoabTable>
      </GoabTab>
    </GoabTabs>

Set a specific tab to be active on page load using the initialTab property.

When to use

Use this pattern when:

  • You want to load a specific tab as the default active tab
  • Users should start viewing a particular tab based on context
  • Deep linking to specific tab content is required
  • Showing priority content like items requiring attention

Considerations

  • The initialTab property uses zero-based indexing (0 = first tab, 1 = second tab, etc.)
  • Consider which tab provides the most relevant content for users on initial load
  • Badge counts in tab headings help users understand the volume of items in each tab
  • Ensure tab content is accessible and keyboard navigable