Tabs

Example

import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Input,
  Label,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@databricks/appkit-ui/react"

export default function TabsExample() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <Card>
          <CardHeader>
            <CardTitle>Account</CardTitle>
            <CardDescription>
              Make changes to your account here. Click save when you're done.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <Label htmlFor="name">Name</Label>
              <Input id="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="username">Username</Label>
              <Input id="username" defaultValue="@peduarte" />
            </div>
          </CardContent>
          <CardFooter>
            <Button>Save changes</Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="password">
        <Card>
          <CardHeader>
            <CardTitle>Password</CardTitle>
            <CardDescription>
              Change your password here. After saving, you'll be logged out.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <Label htmlFor="current">Current password</Label>
              <Input id="current" type="password" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="new">New password</Label>
              <Input id="new" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button>Save password</Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  )
}

Tabs

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

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

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

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 */ />