Tabs

Organize and group related content into smaller sections navigable within a single container

Default

Tab buttons align left and bottom border expands to full width of container.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Compact

Reduced spacing around the tab buttons create a denser visual design.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Full Width

Tab buttons space evenly across the container.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

No Border

Bottom border of tab header list is removed.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

Tabs component maintains these keyboard interactions:

  • Left arrow and Right arrow keys: Moves user between tabs
  • Down arrow: Moves user into the content within the active tab section
  • Up arrow: Returns user to the selected tab

This component has compliance with WCAG guidelines by:

  • Using text color with a Level AA contrast ratio of 4.5:1 contrast between the text color and the background (but only when displayed on light backgrounds)
  • Includes tablist role in tabs header container
  • Includes tab role in tab header element
  • Includes tabpanel role in tab content element