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


"use client";
 
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`

#
Accessibility

#
Keyboard interactions

Key	Description
`Tab`	When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
`ArrowDown` `ArrowRight`	Moves focus to the next trigger depending on `orientation` and activates its associated content.
`ArrowUp` `ArrowLeft`	Moves focus to the previous trigger depending on `orientation` and activates its associated content.
`Home` `End`	Moves focus to the first/last trigger and activates its associated content.

#
Changelog

#
0.1.0

Added component