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

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Tab

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

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Switch related views

Use tabs for sections that share the same context.

Show available sections

Visible tab labels help users see the views they can open.

Keep views in place

Tabs change panels while keeping users in the same context.

Anatomy

Overview Details History
1

Leading icon (optional)

2

Label

3

Active indicator

4

Divider (optional)

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.

Orientation

Lay the tab nav horizontally above the panels or vertically beside them.

Overview Details Overview content Details content

Default orientation. Tab nav runs along the top of the panels.

Disabled tab

Disable individual tabs that are not yet available to the user.

Overview Details Activity Overview content Details content Activity content

All tabs interactive. This is the default state.

Density

Tab density adjusts the spacing of tab items for compact or standard layouts.

Overview Details Overview content Details content

Use default density for most tab groups.

Structure

Overview Details History

Design tokens used

Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.

CategoryTokenValueWhere it's usedGapsgds-gap-xl—Vertical spacing between the tab nav strip and the panel content below itBordersgds-border-width-11pxThickness of the divider rule under the nav stripsgds-border-width-4Width variesThickness of the active-tab indicator (the underline beneath the selected tab)Typographysgds-font-size-14—Font size of the tab label (compact density)Sizesgds-spacer-3—Compact vertical padding of the tab labelsgds-spacer-4—Default tab spacingsgds-spacer-5—Large tab spacingOutlinesgds-outline-focus—Focus outline of tab controlssgds-outline-offset-focus—Focus outline offset of tab controls

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
Use tabs for parallel views of the same content

Use tabs when each panel shows a different facet of the same object. Overview, details, history.

Step 1: Personal details Step 2: Address Step 3: Review and submit Personal details form Address form Review form
Do not use tabs for sequential steps

For steps that must be completed in order, use a stepper. Tabs imply any panel can be visited anytime.

Overview Documents Activity Overview content Documents content Activity content
Keep tab labels short and parallel

Use short nouns or noun phrases for each view. Consistent grammar helps users scan the row quickly.

Overview Profile Activity Documents Notifications Permissions Audit log Billing Settings Overview Profile Activity Documents Notifications Permissions Audit log Billing Settings
Do not use too many tabs in one group

Long tab rows wrap or scroll. With more than five tabs, reorganise the content or use sidenav instead.

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

DateVersionDescription

Roadmap

Planned itemStatusTargetFuture enhancements for tabPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

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.

Past VersionsSGDS v1SGDS v2