Tabs

A set of layered panels of content, each associated with a tab trigger that displays one panel at a time.

Preview

Zostel Manali

A backpacker's paradise nestled in the Himalayas. Enjoy stunning mountain views, bonfire nights, and treks to Solang Valley.

WiFiCafeBonfire

Usage

tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from "zostel-ui";

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Account settings here.
  </TabsContent>
  <TabsContent value="password">
    Password settings here.
  </TabsContent>
  <TabsContent value="settings">
    General settings here.
  </TabsContent>
</Tabs>

Props

Prop	Type	Default	Description
`defaultValue`	`string`	—	The value of the tab that should be active by default.
`value`	`string`	—	The controlled value of the currently active tab.
`onValueChange`	`(value: string) => void`	—	Callback fired when the active tab changes.
`orientation`	`"horizontal" \| "vertical"`	"horizontal"	The orientation of the tabs.

defaultValue

Type: string

Default: —

The value of the tab that should be active by default.

value

Type: string

Default: —

The controlled value of the currently active tab.

onValueChange

Type: (value: string) => void

Default: —

Callback fired when the active tab changes.

orientation

Type: "horizontal" | "vertical"

Default: "horizontal"

The orientation of the tabs.

Previous Alert Next Accordion