Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Tabs

Use with caution: Available Web
Tabs organize related content into separate, focused panels that users can easily switch between.

Examples

Web

Default

View va-tabs–default in Storybook

With second tab selected

View va-tabs–with-second-tab-selected in Storybook

Usage

When to use tabs

  • Organize related content sections. Use tabs when you have multiple panels of content that are related but don’t need to be viewed simultaneously.
  • Reduce cognitive load. Use tabs to present information into manageable sections, allowing users to focus on one section at a time.

When to consider something else

  • Changing views of the same data. To let users easily toggle between a binary set of options to see different views of the same data, use a Button - Segmented component. For example, switching between viewing a list or a map.
  • Chunking content. Consider using an Accordion to display 1 chunk of content at a time.
  • Hierarchical content. If your content is hierarchical or sequential, consider using a single page of well-formatted headings and body text. Use the On this page component to navigate within a single page.
  • Moving up or down in navigational hierarchy. Use the Side Navigation component to move up or down in hierarchy or when the content has over 4 or 5 sections.
  • Search results and filtering. For displaying search results with different categories or filters, use the established Search results pattern instead.

How this component works

Tab overflow

The tab component works best when you need 3 or fewer tabs. If the tabs overflow on small screens, the component uses a scrollbar so that users can still navigate to all tabs. This isn’t ideal because horizontal scrolling makes tabs hard to find and scrollbar behavior isn’t consistent across browsers. When the component uses a scrollbar, a shadow appears to indicate there are more tabs. The scrollbar should only appear at high zoom levels or when the screen is smaller than 320px.

Tab panel

Tab panels are used as a container for the content associated with the selected tab. A 32px space between the tab panel and tabs is recommended for both desktop and mobile views. This is already included in the tabs component. If a different spacing is required the default spacing can be overridden.

Desktop view: 32px margin being shown above and below the tabs.
Desktop view: 32px of space is recommended above and below the tabs.

Behavior

  • Make sure the selected tab is highlighted and visually connected to the content below it.
  • The first tab should be used for the default view.

Placement

  • The tabs component should appear in a consistent location across desktop and mobile views.
  • Place tabs below the page title and subtitle.
  • Information relevant to all tabs can be placed above the tabs.
  • Tabs can be used with the Side navigation component. Don’t add tab links to the side navigation, they should exist separately.
  • Don’t use the On this page component with the tabs component.

Desktop view

Claims Status Desktop View with Tabs
Desktop view: Tabs in Claim Status example with first tab selected.

Placement guidance

  1. Page title and subtitle
  2. Relevant content to all tabs
  3. Tabs component (full width of content area)
  4. Tab panel

Mobile view

Mobile view: Tabs in Claim Status example with first tab selected and margin annotations. Mobile view: Tabs in Claim Status example with second tab selected.
Mobile views: Tabs shown in Claim Status tool.

Instances of tabs in production

See the tabs component discussion for more information on tabs used in production.

Content considerations

  • Keep tab labels succinct and use plain language. Labels should be 1 to 2 words.
  • Use sentence case for tab labels.

Use headers in tab panels

  • Start tab panel content with a heading. Each tab panel should begin with a heading that describes the panel’s content.
  • Maintain proper heading hierarchy. Ensure headings within tab panels follow logical order (h2, h3, h4, etc.) to maintain document structure for screen readers and assistive technology.
  • Keep headings consistent across panels. Use similar heading patterns and levels across all tab panels for a cohesive experience.
  • Consider the tab label and panel heading relationship. The panel heading should relate to and expand upon the tab label, providing clear context for the content that follows.
  • Consider when headers may not be necessary. In some cases, a heading may not be needed if the tab panel contains a single, self-explanatory component (like a data table with a clear caption) or when the tab label fully describes the content and no additional context is needed.

Accessibility considerations

  • Use clear, descriptive tab labels. Tab labels should help users understand the purpose and contents of each tab panel. Avoid vague labels like “Tab 1” or “More”.
  • Place Tabs inside the main content region. Tabs should be located after the h1 within the <main> content region.
  • Don’t use Tabs for page-level navigation. Tabs are not a substitute for primary or secondary navigation. For navigating across different pages, use Side Navigation.
  • Keep focus on the selected tab after activation. When a user activates a tab, focus should remain on the newly selected tab and not move into the tab panel. This helps keyboard and screen reader users stay oriented and easily navigate through the tab list. Users can choose to navigate into the panel content when they’re ready. Avoid auto-focusing inside the panel.
  • Follow standard keyboard interaction patterns. Refer to W3C’s guidance for standard keyboard navigation for tabs.

Component checklist

Web Platform

60%

6 of 10 complete

Maturity

Guidance

Web

Examples, usage, code usage, content considerations, and accessibility considerations are all complete.

Research

Web

VFS team conducted research on this component which is linked from this page.

Stability

Web

Component has been in production for more than 3 months with no significant issues found.
Note: This component has mobile accessibility issues and should be used sparingly.

Adoption

Web

Multiple teams have adopted this component.

Accessibility

For more information on each category, see Accessibility testing for design system components.

Platform
Web
Last audit date
2025-07-16
Code review
Pass
Readability
Pass
Automated scans
Pass
Use of color
Pass
Text resizing, zoom, and magnification
Pass
Screen readers
Pass
Input and interaction methods
Pass

Code assets

Variations

Web

Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)

Responsive

Web

Component depicted in all responsive breakpoints.

Interactive states

Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).

Tokens

N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Internationalization

N/A Web

Describes i18n attributes.

Visual assets

Variations

Web

Figma library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)

Responsive

Web

Component designed to work in all responsive breakpoints.

Interactive states

Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).

Tokens

N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Legend:

  • Complete
  • Incomplete
  • N/A Not applicable

Provide feedback

Share your feedback, report issues, or suggest improvements for the Tabs component. Your input helps us make the design system better for everyone.

Edit this page in GitHub (Permissions required)
Last updated: Oct 07, 2025