Tabs

Tabbed interface for organizing content into separate panels

Example

tabs

Loading preview…

Tabbed interface for organizing content into separate panels

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

Prop	Type	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`	-	-

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

<Tabs /* props */ />

Content panel associated with a tab

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

Prop	Type	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`	-	-

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

<TabsContent /* props */ />

Container for tab trigger buttons

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

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

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

<TabsList /* props */ />

Button that activates a tab panel

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

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

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

<TabsTrigger /* props */ />