Tabs

Design System - Tabs component

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

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={{}}
/>

Component Flutter

Component Design

Anatomy

---

Variants

---

	Default 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.

---

Interaction States

Active 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.

Properties

Label Each tab is defined by a clearly readable label that communicates its purpose
With Icon Useful for visual reinforcement, especially in data-heavy or mobile-first interfaces.
Without Icon A cleaner variant that emphasises text.

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.

React

Property	Value	Default
configNavItems	text
configItemKey	text
activeLink	yes/no	no
setActiveLink	yes/no	no
showNav	number
style	yes/no
navStyles	yes/no	no
itemStyle	yes/no	no
className	yes/no	no
navClassName	number	no
onTabClick	yes/no	no
children	text	no
configDisplayKey	yes/no	no

Flutter

---

Behaviours

	Responsive Layout Tabs automatically adjust their width and layout based on the number of items and screen size to ensure optimal usability across devices.
	Instant Content Update When switching between tabs, the corresponding content updates instantly without needing to reload the page, enhancing the user experience.

---

Usage Guide

---

Highlight the active tab clearly 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. Don’t mix the use of icons in tabs. Consistent icon usage maintains clear spatial relationships and visual balance, ensuring a cohesive navigation experience.

Changelog

---

Date	Number	Notes
Dec 15, 2024	v-0.0.2	This component is added to the website. This component is now individually versioned.

Design Checklist

---

	All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
	Accessible contrast for text - 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).
	Accessible contrast for UI components - 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).
	Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
	Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
	Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
	Writing guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
	Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
	Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
	Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.