Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Tabs

Tabbed interface for organizing content into separate panels

## 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​

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