Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Components
  3. Tabs
  5. API and Development

Tabs

API and Development

View Source
Submit Issue

Tabs pairs a list of triggers with content panels so users can switch between related sections without leaving the page. It wraps Radix UI Tabs with keyboard navigation, ARIA roles, and optional vertical layout.

If you need tab-shaped UI but no content panels, see TabMenu (local state) or TabNav (route navigation).

Props

Tabs (Root)

Name

Type

Default

Description

defaultValue

string

—

default tab value to be active when the component is mounted

label

string

—

renders an aria-label for the tabs component @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label

labelledBy

string

—

id of the element to be used as a label, used as aria-labelledby for the tabs component @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby

onValueChange

((value: string) => void)

—

callback function to be called when the tab value changes for *controlled* component

orientation

TabsOrientation

TabsOrientation.Horizontal

interaction orientation of tabs, horizontal or vertical (defaults to horizontal) note that this is not visual orientation, but used mostly for keyboard navigation arrow direction @link https://github.com/radix-ui/website/issues/463

value

string

—

current tab value to be active when the *controlled* component is mounted

Storybook

Interactive examples and edge cases for this component are in Storybook.

Horizontal
Vertical
Controlled
Disabled Trigger
All Variants
Test Tabs List Horizontal
Test Tabs List Vertical
Test Tabs List Sliding Animation
Test Tabs List Without Underline
Test Tabs List Many Tabs
Tabs List: Default
Tabs List: Vertical

TabsList

Name

Type

Default

Description

children

ReactNode

required

TabsTrigger components.

orientation

TabsOrientation

Horizontal

Visual layout of triggers.

showUnderline

boolean

true

Bottom border under triggers.

slidingAnimation

boolean

false

Animated active indicator.

TabsTrigger

Name

Type

Default

Description

value

string

required

Identifies this trigger.

children

ReactNode

required

Label content.

small

boolean

false

Compact sizing.

counter

number | string

—

Badge when greater than zero.

leadIcon

SVGAsset

—

Icon before the label.

iconTitle

string

—

Accessible name for lead icon.

TabsContent

Name

Type

Default

Description

value

string

required

Must match a TabsTrigger value.

children

ReactNode

required

Content shown when this tab is active.

Horizontal

Vertical

Controlled tabs

Basic tabs

Sliding animation

Without underline

All variants

Accessible label

Picking the right component

ScenarioComponentWhy
Switch between content panels on one pageTabsManages content visibility with TabsContent.
Filter or view-switch without URL changeTabMenuThin wrapper around Tabs—no content panels, just selection state.
Navigate to different routes (URL changes)TabNavRenders <a> links with SPA navigation and pathname matching.

Previous

Tabs / Usage

Next

Tabs / Accessibility

On this page

Props
Tabs (Root)
Storybook
TabsList
TabsTrigger
TabsContent
Horizontal
Vertical
Controlled tabs
Basic tabs
Sliding animation
Without underline
All variants
Accessible label
Picking the right component