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.
// Sample code
<CheckBox
label="Label"
onChange={(e)=>{console.log(e.target.checked}}
/>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.
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
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
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.
Last updated
Was this helpful?