# Tabs

Tabbed interface for organizing content into separate panels

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
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[​](#tabs-1 "Direct link to Tabs")

Tabbed interface for organizing content into separate panels

**Source:** [`packages/appkit-ui/src/react/ui/tabs.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tabs.tsx)

### Props[​](#props "Direct link to 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[​](#usage "Direct link to Usage")

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

<Tabs /* props */ />

```

## TabsContent[​](#tabscontent "Direct link to TabsContent")

Content panel associated with a tab

**Source:** [`packages/appkit-ui/src/react/ui/tabs.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tabs.tsx)

### Props[​](#props-1 "Direct link to 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[​](#usage-1 "Direct link to Usage")

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

<TabsContent /* props */ />

```

## TabsList[​](#tabslist "Direct link to TabsList")

Container for tab trigger buttons

**Source:** [`packages/appkit-ui/src/react/ui/tabs.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tabs.tsx)

### Props[​](#props-2 "Direct link to Props")

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

### Usage[​](#usage-2 "Direct link to Usage")

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

<TabsList /* props */ />

```

## TabsTrigger[​](#tabstrigger "Direct link to TabsTrigger")

Button that activates a tab panel

**Source:** [`packages/appkit-ui/src/react/ui/tabs.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tabs.tsx)

### Props[​](#props-3 "Direct link to Props")

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

### Usage[​](#usage-3 "Direct link to Usage")

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

<TabsTrigger /* props */ />

```