Tabs

The Tabs component allows users to switch between different views or sections of content within the same page, without navigating away. It helps organize related information in a compact and easily accessible way, improving content discoverability and reducing cognitive load.

Tabs are often used when content is related but needs to be divided into smaller, manageable sections — for example, product details, settings, or data panels.

When to use it (and when not to)

Use Tabs when you need to:

• Organize related content into separate sections within the same context.
• Allow users to quickly switch between different views without leaving the page.
• Improve the clarity of complex or lengthy interfaces.

Avoid using Tabs when:

• The sections are not closely related or when users need to compare content side by side.
• There are too many tabs that would make navigation overwhelming.

Quick summary of accessibility & consistency

• Follow accessibility best practices to ensure Tabs are fully operable and understandable for all users.
• Use semantic roles and attributes according to the WAI-ARIA Authoring Practices.
• Maintain logical focus order and provide visible focus states.
• Make sure all tab actions are keyboard-accessible and that only one panel is visible at a time.
• Ensure contrast ratios and labels meet accessibility standards for clarity and usability.

Styling

Colors

Name	Applied as	Applied to
color-background-neutral-default	Background color	Tabs container (neutral)
color-background-neutral-default	Background color	Tabs container (neutral)
color-background-contrast-default	Background color	Tabs container (contrast)
color-background-contrast-default	Background color	Tabs container (contrast)
color-fill-contrast-default	Background color	Tab item (filled variant)
color-fill-contrast-default	Background color	Tab item (filled variant)
color-foreground-neutral-default	Text color	Tab item (neutral rested / hover / active)
color-foreground-neutral-default	Text color	Tab item (neutral rested / hover / active)
color-foreground-neutral-muted	Text color	Tab item (neutral disabled)
color-foreground-neutral-muted	Text color	Tab item (neutral disabled)
color-foreground-contrast-default	Text color	Tab item (contrast rested / hover / active)
color-foreground-contrast-default	Text color	Tab item (contrast rested / hover / active)
color-foreground-contrast-muted	Text color	Tab item (contrast disabled)
color-foreground-contrast-muted	Text color	Tab item (contrast disabled)
color-border-neutral-muted	Border color	Tab item (neutral rested / disabled)
color-border-neutral-muted	Border color	Tab item (neutral rested / disabled)
color-border-neutral-default	Border color	Tab item (neutral hover)
color-border-neutral-default	Border color	Tab item (neutral hover)
color-border-contrast-muted	Border color	Tab item (contrast rested / disabled)
color-border-contrast-muted	Border color	Tab item (contrast rested / disabled)
color-border-contrast-default	Border color	Tab item (contrast hover)
color-border-contrast-default	Border color	Tab item (contrast hover)
color-border-ev-default	Border color	Tab item (EV active)
color-border-ev-default	Border color	Tab item (EV active)

Spacing

Name	Applied as	Applied to
spacing-xs	Padding block	Tab item
spacing-xs	Padding block	Tab item
spacing-md	Padding inline	Tab item
spacing-md	Padding inline	Tab item
spacing-none	Gap	Tabs container
spacing-none	Gap	Tabs container

Text Styles

Name	Applied as	Applied to
Lorem Ipsum typography-body-6 (emphasis)	Text style	Tab item (selected)
Lorem Ipsum typography-body-6 (emphasis)	Text style	Tab item (selected)

Accessibility

For Design

• All states (active, disabled, hover) must maintain accessible contrast.
• Focus styles must remain visible and meet WCAG AA contrast requirements across all supported surfaces. Focus should be clearly distinguishable from hover.
• Colour tokens used should be semantic (e.g. foreground/neutral/default) rather than fixed values. This ensures the component adapts correctly to different themes or surfaces.

For Dev

To ensure Tabs meet WCAG 2.1 AA and support assistive technologies, follow these implementation standards:

1. Key Points
   • The container has role="tablist".
   • Each tab element has role="tab", aria-controls linking it to its corresponding panel, and aria-selected="true" on the active tab.
   • Each content panel has role="tabpanel", aria-labelledby linking it back to the associated tab, and hidden when inactive (to prevent focus and screen reader access).
2. Keyboard Navigation
   • Tab: Moves focus into or out of the tab list.
   • Arrow Right / Arrow Left: Moves focus between tabs within the list.
   • Home / End: Moves focus to the first or last tab.
   • Enter / Space: Activates the focused tab and displays its content panel.
3. Focus Ring / Visible Focus
   • List items must display a visible focus style, not only a colour change.
4. Screen Reader Support
   • The ARIA roles (tablist, tab, and tabpanel) provide structural information, so screen readers can announce the number of tabs and which one is selected.
   • The aria-selected and aria-controls relationships ensure users know which content area belongs to each tab.
   • Each tab should have a clear, descriptive label that communicates the section’s purpose.

Usage

Do

Guidance on how to use a component.

• Keep tab labels short, clear, and descriptive.
• Ensure there is always one — and only one — selected tab.
• Provide visible focus indicators for keyboard users.
• Use proper heading hierarchy within panels to maintain logical document structure.
• Avoid using tabs if content loads asynchronously without clear feedback — provide a loading indicator if necessary.
• Maintain sufficient color contrast for active and inactive states.
• Use the blue option only for EV Tools.
• Use the tabs without fill as default. Use the fill only in specific scenarios where this fill is needed (e.g. EV Tools such as Charging Time Calculator).

Don’t

Guidance on what to avoid when using a component.

• Don’t use <div> elements without appropriate ARIA roles to mimic tab behavior.
• Don’t allow multiple tabs to be selected at the same time.
• Don’t remove inactive panels from the DOM — use hidden instead to preserve accessibility.
• Don’t change focus automatically to the tab panel when switching tabs; keep focus on the active tab.
• Don’t rely solely on color or visual styling to indicate which tab is active — use additional cues like bold text or underlines.
• Don’t create tab labels that wrap onto multiple lines or truncate important information.
• Don’t use tabs for unrelated or excessively long content; consider splitting it into separate pages instead.