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
icon Display an icon before or after the button content. ReactNode
iconPosition Control whether to show the icon before or after the button content. "end" \| "start" Default: start
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
forceMount Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. true
value* string

#
Changelog

#
0.1.0

Added component

Table ALPHA

Text