Tabs

Switches between panels of content.

TabsProps packages/core/src/controls.ts:154 ↗

Import

import { Tabs } from "@tarve/core";

Usage

Tabs.tsx

import { Tabs, Text } from "@tarve/core";

let tab = "account";

<Tabs
  value={tab}
  items={[
    { value: "account", label: "Account", content: <Text>Account settings</Text> },
    { value: "password", label: "Password", content: <Text>Change your password</Text> },
  ]}
  onValueChange={(value) => {
    tab = value;
  }}
/>

Props

Prop	Type	Default
`items` required	`TabItem[]`	—
`value` required	`string`	—
`onValueChange`	`(value: string) => void`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

TabItem

interface TabItem { value: string; label: string; content: Child; disabled?: boolean }