Tabs

Copy for LLM

Tabs are used to allow users to navigate quickly between views within the same context.

Import

import { Tabs } from "@cfa/react-core";

Live Editor

Guidelines

When to use

Tabs is for peer content panels that share the same space, with only one visible at a time, such as Details, Activity, and Comments on one page.

Do

Default to the first tab on load.
Do not nest Tabs inside Tabs. Nest only when it is semantically critical. Nesting usually signals incorrect information architecture.
Write tab labels as short, scannable nouns, one or two words. Never wrap to two lines.
Limit to six tabs when possible. Enable horizontal scrolling when the tab bar exceeds the viewport width.
Persist the active tab in the URL hash so the selection survives reload.

Avoid

Using Tabs for a sequential multi-step flow. Use Stepper.
Using Tabs when only one panel exists. Show the content directly.

Examples

Disabled

The isDisabled prop can disable the all Tabs, or one or more single Tab.

Force Mount

The forceMount prop can be used to force the tab panel to mount even when it is not selected. This is useful for keeping the state of the panel when switching between tabs.

Fullwidth

The fullWidth prop can be used to make the tabs take up the full width of the container.

Scrolling

Tabs Nested

Tabs nested within Tabs are not preferred by Design UX Patterns/Standards, but are possible to achieve.