# Tabs

Tabs are used to organise content into meaningful sections within the same view. They help reduce cognitive overload by presenting information progressively.

<figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FBaPSdVJ7yRYoqTQ0jLxx%2Fimage.png?alt=media&#x26;token=1ba12f8a-d618-4c0b-9209-40a57b95b792" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Component React" %}

```
// Sample code

<Tab
  activeLink="Tab one"
  configItemKey="name"
  configNavItems={[
    {
      code: '1',
      name: 'Tab one'
    },
    {
      code: '2',
      name: 'Tab two'
    },
    {
      code: '3',
      name: 'Tab three'
    },
    {
      code: '4',
      name: 'Tab four'
    }
  ]}
  itemStyle={{}}
  navStyles={{}}
  onTabClick={() => {}}
  setActiveLink={()=>{}}
  showNav
  style={{}}
/>


```

{% endtab %}

{% tab title="Component Flutter" %}

```
// Sample code

DigitTabBar(
          tabs:  ['Tab 1', 'Tab 2', 'Tab 3'],
          initialIndex: 1,
          onTabSelected: (index) {
            // Handle tab selection change
          },
        );
```

{% endtab %}

{% tab title="Component Design" %}

{% endtab %}
{% endtabs %}

## Anatomy

<figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2Fi2XyxkQodc7hLlS3B7vC%2Fimage.png?alt=media&#x26;token=deedfa19-82c0-4fba-b286-0fa86ee94a07" alt=""><figcaption></figcaption></figure>

***

## Variants

***

<table data-header-hidden><thead><tr><th width="321"></th><th></th></tr></thead><tbody><tr><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FLFKkQa2ezLzc1WwFnjDP%2Fimage.png?alt=media&#x26;token=724e2025-bf61-405d-90b9-2c7bf859bf88" alt=""><figcaption></figcaption></figure></div></td><td><p><strong>Default</strong></p><p>The Basic tab variant presents a straightforward horizontal layout of labelled tabs. It is ideal for dividing related content within the same page or module, allowing users to switch between sections without navigating away.</p></td></tr></tbody></table>

***

## Interaction States

<table><thead><tr><th width="334.98046875"></th><th></th></tr></thead><tbody><tr><td><p><strong>Active</strong></p><p>The active tab is highlighted with a bold label and a strong border to visually indicate selection. It improves user orientation by showing which section is currently visible.</p></td><td><div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F5Q4CdHKLyP1DgdwnpKNE%2Fimage.png?alt=media&#x26;token=aad53fc0-dc49-4d37-b257-6a2ea3202504" alt=""><figcaption></figcaption></figure></div></td></tr></tbody></table>

## Properties

|                                                                                                                               |                                                                                                                                                                                                                                                                                            |
| ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><strong>Label</strong></p><p>Each tab is defined by a clearly readable label that communicates its purpose</p>             | <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F75dpkN24z7FBRfrI6P4x%2Fimage.png?alt=media&#x26;token=36fd276a-33ae-40ad-9715-01f7d66dda11" alt=""><figcaption></figcaption></figure></div> |
| <p><strong>With Icon</strong></p><p>Useful for visual reinforcement, especially in data-heavy or mobile-first interfaces.</p> | <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FR9NJBuy5W590BSSOdT1F%2Fimage.png?alt=media&#x26;token=59847ffa-71a2-4400-a136-fef2655782d0" alt=""><figcaption></figcaption></figure></div> |
| <p><strong>Without Icon</strong></p><p>A cleaner variant that emphasises text.</p>                                            | <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F1ecY7vJUsmVgdydTH6RH%2Fimage.png?alt=media&#x26;token=6e67f2a6-26a7-47fe-a4d1-3b05752c5d98" alt=""><figcaption></figcaption></figure></div> |

## Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

{% tabs %}
{% tab title="React" %}

<table><thead><tr><th width="257">Property</th><th>Value</th><th>Default</th></tr></thead><tbody><tr><td>configNavItems</td><td>text</td><td></td></tr><tr><td>configItemKey</td><td>text</td><td></td></tr><tr><td>activeLink</td><td>yes/no</td><td>no</td></tr><tr><td>setActiveLink</td><td>yes/no</td><td>no</td></tr><tr><td>showNav</td><td>number</td><td></td></tr><tr><td>style</td><td>yes/no</td><td></td></tr><tr><td>navStyles</td><td>yes/no</td><td>no</td></tr><tr><td>itemStyle</td><td>yes/no</td><td>no</td></tr><tr><td>className</td><td>yes/no</td><td>no</td></tr><tr><td>navClassName</td><td>number</td><td>no</td></tr><tr><td>onTabClick</td><td>yes/no</td><td>no</td></tr><tr><td>children</td><td>text</td><td>no</td></tr><tr><td>configDisplayKey</td><td>yes/no</td><td>no</td></tr></tbody></table>
{% endtab %}

{% tab title="Flutter" %}

<table><thead><tr><th>Property</th><th width="209">Value</th><th>Default</th></tr></thead><tbody><tr><td>tabs</td><td>List&#x3C;String></td><td>required</td></tr><tr><td>initialIndex</td><td>int</td><td>required</td></tr><tr><td>onTabSelected</td><td>ValueChanged&#x3C;int></td><td>-</td></tr><tr><td>tabBarThemeData</td><td>DigitTabBarThemeData</td><td>-</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

## Behaviours

|                                                                                                                                                                                                                                                                                            |                                                                                                                                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FTZZ9Rmi6iuzh64etYfBC%2Fimage.png?alt=media&#x26;token=ef9e9c80-7271-4cda-a327-c7fa5df151b1" alt=""><figcaption></figcaption></figure></div> | <p><strong>Responsive Layout</strong></p><p>Tabs automatically adjust their width and layout based on the number of items and screen size to ensure optimal usability across devices.</p>        |
| <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FNzsYwak3WAeqIn0n2SYh%2Fimage.png?alt=media&#x26;token=b14bcd8d-253c-49cc-b9ae-01abf0c990dc" alt=""><figcaption></figcaption></figure></div> | <p><strong>Instant Content Update</strong></p><p>When switching between tabs, the corresponding content updates instantly without needing to reload the page, enhancing the user experience.</p> |

***

## Usage Guide

***

| <p><strong>Highlight the active tab clearly</strong></p><p>Ensure the active tab stands out from inactive ones. This can be done through bold text, colour changes, and a border to help users easily identify which section is currently selected. A well-defined active tab enhances navigation clarity and improves the user experience.

</p><p></p><p>Don’t mix the use of icons in tabs. Consistent icon usage maintains clear spatial relationships and visual balance, ensuring a cohesive navigation experience.</p> | <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FCoNUDcQF39GwWLilAxWH%2Fimage.png?alt=media&#x26;token=2f00ac28-6dbe-4102-a337-64b7454ce4fb" alt=""><figcaption></figcaption></figure></div> |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | <div><figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FFrc0XyCoSYrGp6Sq1j1q%2Fimage.png?alt=media&#x26;token=8ed716b9-f6b2-4640-860e-04e0917776ac" alt=""><figcaption></figcaption></figure></div> |

## Changelog

***

| Date         | Number  | Notes                                                                                           |
| ------------ | ------- | ----------------------------------------------------------------------------------------------- |
| Dec 15, 2024 | v-0.0.2 | <p>This component is added to the website.<br>This component is now individually versioned.</p> |

## Design Checklist

***

<table data-header-hidden><thead><tr><th width="129" data-type="checkbox"></th><th></th></tr></thead><tbody><tr><td>true</td><td><strong>All interactive states</strong> - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>true</td><td><strong>Accessible use of colours</strong> - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)</td></tr><tr><td>true</td><td><strong>Accessible contrast for text</strong> - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).</td></tr><tr><td>true</td><td><strong>Accessible contrast for UI components</strong> - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).</td></tr><tr><td>true</td><td><strong>Keyboard interactions</strong> - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>false</td><td><strong>Screen reader accessible</strong> - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.</td></tr><tr><td>true</td><td><strong>Responsive for all breakpoints</strong> - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop</td></tr><tr><td>true</td><td><strong>Usage guidelines</strong> - Includes a list of dos and don'ts that highlight best practices and common mistakes.</td></tr><tr><td>false</td><td><strong>Writing guidelines</strong> - Content standards and usage guidelines for writing and formatting in-product content for the component.</td></tr><tr><td>true</td><td><strong>Defined variants and properties</strong> - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)</td></tr><tr><td>true</td><td><strong>Defined behaviours</strong> - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.</td></tr><tr><td>true</td><td><strong>Design Kit</strong> - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.</td></tr></tbody></table>