A set of layered sections of content—known as tab panels—that are displayed one at a time.

Follows the WAI-ARIA authoring practices for tabs.

Import

import { Tabs } from "@fuegokit/react";

Additional styling guides and examples are coming soon. For now, explore the examples at Storybook.

Usage

<Tabs defaultValue="tab1" orientation="vertical">
  <Tabs.List aria-label="tabs example">
    <Tabs.Trigger value="tab1">One</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Two</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Tab one content</Tabs.Content>
  <Tabs.Content value="tab2">Tab two content</Tabs.Content>
  <Tabs.Content value="tab3">Tab three content</Tabs.Content>

Styling

To apply styles to the Tabs primitive, use Fuegokit React's themeGet function to access Fuegokit Tokens directly.

Component API

<StyledTabs defaultValue="tab1" orientation="vertical">
  <StyledTabsList aria-label="tabs example">
    <StyledTabsTrigger value="tab1">One</StyledTabsTrigger>
    <StyledTabsTrigger value="tab2">Two</StyledTabsTrigger>
    <StyledTabsTrigger value="tab3">Three</StyledTabsTrigger>
  </StyledTabsList>
  <StyledTabsContent value="tab1">Tab one content</StyledTabsContent>
  <StyledTabsContent value="tab2">Tab two content</StyledTabsContent>
  <StyledTabsContent value="tab3">Tab three content</StyledTabsContent>

CSS

/react/src/Tabs/stories/StoryStyles.tsx

const StyledTabs = styled(Tabs)`
  button,
  fieldset,
  input {
    all: unset;
  }
  display: flex;
  flex-direction: column;
  width: 300px;

Accessibility

Follows the WAI-ARIA authoring practices for tabs.

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	Moves focus to the next trigger depending on `orientation` and activates its associated content.
ArrowRight	Moves focus to the next trigger depending on `orientation` and activates its associated content.
ArrowUp	Moves focus to the previous trigger depending on `orientation` and activates its associated content.
ArrowLeft	Moves focus to the previous trigger depending on `orientation` and activates its associated content.
Home	Moves focus to the first trigger and activates its associated content.
End	Moves focus to the last trigger and activates its associated content.

Props

Tabs

A vertically stacked set of interactive headings that each reveal an associated section of content.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
defaultValue	string	-	The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.
value	string	-	The controlled value of the item to expand when type is 'single'. Must be used in conjunction with `onValueChange`.
onValueChange	(value: string) => void	-	Event handler called when the value changes.
orientation	'horizontal' \| 'vertical' \| undefined	'horizontal'	The orientation of the component.
dir	'ltr' \| 'rtl'	'ltr'	When `true`, prevents the user from interacting with the accordion and all its items.
activationMode	'automatic' \| 'manual'	'automatic'	When `automatic`, tabs are activated when receiving focus. When `manual`, tabs are activated when clicked.

Data attributes

Data attribute	Values
[data-orientation]	'vertical' \| 'horizontal'

Tabs.List

Contains the triggers that are aligned along the edge of the active content.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
loop	boolean	true	When `true`, keyboard navigation will loop from last tab to first, and vice versa.

Data attributes

Data attribute	Values
[data-orientation]	'vertical' \| 'horizontal'

Tabs.Trigger

The button that activates its associated content.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
value*	string	-	A unique value that associates the trigger with a content.
disabled	boolean	false	When `true`, prevents the user from interacting with the tab.

Data attributes

Data attribute	Values
[data-state]	'active' \| 'inactive'
[data-disabled]	Present when disabled
[data-orientation]	'vertical' \| 'horizontal'

Tabs.Content

Contains the content associated with each trigger.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
value*	string	-	A unique value that associates the trigger with a content.
forceMount	boolean	-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. If used on this part, it will be inherited by DropdownMenu.Content and DropdownMenu.SubContent respectively.

Data attributes

Data attribute	Values
[data-state]	'open' \| 'closed'
[data-orientation]	'vertical' \| 'horizontal'