Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Tab

Tabs are used within a tab group to activate the corresponding tab panels.

GitHubGitHub logocomponents/tab
StorybookStorybook logocomponents/tab
DesignUsageAccessibilityUpdates

Purpose

Switch between related views

Tabs let users navigate between content sections that share a context — different aspects of the same object, or different states of the same data.

Keep all options reachable

All tab labels are visible at once, so users can see what sections exist and switch between them without a back button.

Preserve state between switches

Switching tabs doesn't reload the page — users can move back and forth between panels without losing scroll position or entered data.

Anatomy

Overview Details History Overview content Details content History content
1

Tab list

2

Tab

3

Tab panel

Configuration

Variant

Tab variants control the visual style of the active tab indicator to suit different surface contexts.

Overview Details History Overview content Details content History content

The underlined variant marks the active tab with a bottom border. Use as the default tab style in most page and panel contexts.

Playground

BETA
Overview Details History Overview content Details content History content
Variant

Structure

Overview Details History Overview content Details content History content

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: gap-xl under sgds/tab means sgds/tab/gap-xl.

sgds/tab
CategoryComponent tokenSemantic tokenValueGapgap-xlsgds/gap/xl—gap-xssgds/gap/xs8pxBorderborder-color-mutedsgds/border-color-muted#DFDFDFborder-radius-mdsgds/border-radius/md8pxborder-width-1sgds/border-width/11pxborder-width-4sgds/border-width/4—Typographyfont-size-14sgds/font-size/14—Colourcolor-defaultsgds/color-default#1A1A1Acolor-fixed-lightsgds/color-fixed-light#F3F3F3bg-translucentsgds/bg-translucent—bg-translucent-subtlesgds/bg-translucent-subtleoklch(from #0E0E0E l c h / 0.05)primary-color-defaultsgds/primary/color/default—primary-surface-defaultsgds/primary/surface/default—Opacityopacity-50sgds/opacity/50—

Usage

When to use

  • Use this component to help users understand where they are and move confidently to the next place.
  • Use it when the navigation pattern matches the scale of the journey and the relationship between destinations.

When not to use

  • Do not use this component when the page does not need another layer of navigation.
  • Do not add vague, repetitive, or competing labels that make the path harder to understand.

Best practices

Overview Details History Overview content Details content History content
Keep destinations clear

Short, specific labels and a clear current state help users move through the interface with confidence.

Overview Details History Overview content Details content History content Overview Details History Overview content Details content History content
Do not compete with the page structure

Repeated or unnecessary navigation patterns make it harder to understand where to go next.

Accessibility considerations

Built-in accessibility

  • Tabs expose tablist, tab, and panel relationships.
  • The tab group connects each tab with its controlled panel.

Labels and content

  • Use short tab labels that describe each panel.
  • Keep tab content related to the selected tab.

Focus and interaction

  • Users should be able to move between tabs and continue into the active panel.
  • Do not place critical content only in an inactive panel without a clear tab label.

Keyboard interaction

KeyInteractionTabMoves focus from the tab to the next focusable element.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused focused tab.SpaceActivates the focused focused tab.← Leftor↑ UpMoves focus to the previous tab.→ Rightor↓ DownMoves focus to the next tab.HomeMoves focus to the first tab.EndMoves focus to the last tab.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for tabPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/tab

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.