Tabs

Set of content sections to be displayed one at a time.

#
Documentation

#
Usage

Use the value and defaultValue props to toggle between controlled and uncontrolled usage. And combine it with onValueChange to listen for changes to the state.

This is first content


import {
  Box,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("first");
 
  return (
    <Box w="full">
      <Tabs onValueChange={setValue} value={value}>
        <TabsList>
          <TabsTrigger value="first">First</TabsTrigger>
          <TabsTrigger value="second">Second</TabsTrigger>
          <TabsTrigger value="third">Third</TabsTrigger>
        </TabsList>
 
        <TabsContent py="16" value="first">
          This is first content
        </TabsContent>
 
        <TabsContent py="16" value="second">
          This is second content
        </TabsContent>
 
        <TabsContent py="16" value="third">
          This is third content
        </TabsContent>
      </Tabs>
    </Box>
  );
}

#
Props

#
Tabs

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`activationMode` Whether a tab is activated automatically or manually. @defaultValue automatic `"manual" \| "automatic"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`defaultValue` The value of the tab to select by default, if uncontrolled `string`
`dir` The direction of navigation between toolbar items. `"ltr" \| "rtl"`
`onValueChange` A function called when a new tab is selected `(value: string) => void`
`orientation` The orientation the tabs are layed out. Mainly so arrow navigation is done accordingly (left & right vs. up & down) @defaultValue horizontal `"horizontal" \| "vertical"`
`value` The value for the selected tab, if controlled `string`

#
TabsList

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`loop` `false \| true`

#
TabsTrigger

Supports all Button props in addition to its own. Renders a <button> element.

Prop
`addonAfter` Display content inside the button after `children`. `ReactNode`
`addonBefore` Display content inside the button before `children`. `ReactNode`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`value*` `string`

#
TabsContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`value*` `string`

#
Changelog

#
0.1.0

Added component