Tabs

Tabbed interface for organizing content into separate panels

Example

tabs

Loading preview…

Tabs

Tabbed interface for organizing content into separate panels

Source: packages/appkit-ui/src/react/ui/tabs.tsx

Props

Prop	Type	Required	Default	Description
value	string		-	The value for the selected tab, if controlled
defaultValue	string		-	The value of the tab to select by default, if uncontrolled
onValueChange	((value: string) => void)		-	A function called when a new tab is selected
orientation	enum		-	The orientation the tabs are layed out. Mainly so arrow navigation is done accordingly (left & right vs. up & down) @defaultValue horizontal
dir	enum		-	The direction of navigation between toolbar items.
activationMode	enum		-	Whether a tab is activated automatically or manually. @defaultValue automatic
asChild	boolean		-	-

Usage

import { Tabs } from '@databricks/appkit-ui';

<Tabs /* props */ />

TabsContent

Content panel associated with a tab

Source: packages/appkit-ui/src/react/ui/tabs.tsx

Props

Prop	Type	Required	Default	Description
value	string		-	The value for the selected tab, if controlled
forceMount	true		-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
asChild	boolean		-	-

Usage

import { TabsContent } from '@databricks/appkit-ui';

<TabsContent /* props */ />

TabsList

Container for tab trigger buttons

Source: packages/appkit-ui/src/react/ui/tabs.tsx

Props

Prop	Type	Required	Default	Description
loop	boolean		-	-
asChild	boolean		-	-

Usage

import { TabsList } from '@databricks/appkit-ui';

<TabsList /* props */ />

TabsTrigger

Button that activates a tab panel

Source: packages/appkit-ui/src/react/ui/tabs.tsx

Props

Prop	Type	Required	Default	Description
value	string		-	The value for the selected tab, if controlled
asChild	boolean		-	-

Usage

import { TabsTrigger } from '@databricks/appkit-ui';

<TabsTrigger /* props */ />