A set of layered sections of content—known as tab panels—that are displayed one at a time.

TabsProps

Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

asChild

boolean

The value of the tab to select by default, if uncontrolled

defaultValue

string

The direction of navigation between toolbar items.

enum

intent

A function called when a new tab is selected

onValueChange

(value: string) => void

The orientation the tabs are layed out.
Mainly so arrow navigation is done accordingly (left & right vs. up & down)
@defaultValue horizontal

orientation

size

The value for the selected tab, if controlled

value

TabsContentProps

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

forceMount

true

A unique value that associates the content with a trigger.

TabsListProps

When true, keyboard navigation will loop from last tab to first, and vice versa.

Tabs

Install#

Import#