Tabs

The tabs component provides a set of layered sections of content—known as tab panels—that are displayed one at a time. This component is based on the Radix-Ui Tabs Primitive. All of the exposed APIs and components are exposed here, just some are styled to fit the StreamElements design system.

Basic Example

Use the exposed Tabs object from the library to access all the components.

import { Tabs } from '@streamelements/frontend-ui';

export function MyComponent() {
  return (
    <Tabs.Root defaultValue="0">
      <Tabs.List aria-label="Tabs Example">
        <Tabs.Trigger value="0">
          First Tab
        </Tabs.Trigger>
        <Tabs.Trigger value="1">
          Second Tab
        </Tabs.Trigger>
        <Tabs.Trigger value="3">
          Third Tab
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="0">
        Content for Tab #1
      </Tabs.Content>
      <Tabs.Content value="1">
        Content for Tab #2
      </Tabs.Content>
      <Tabs.Content value="3">
        Content for Tab #3
      </Tabs.Content>
    </Tabs.Root>
  );
} 

Content for Tab #1

Exposed Components

• Root
• List
• Trigger
• Content

API reference

Check out the Radix-UI Tabs Docs Page for API docs.

Props

We are exposing Radix-UI Tabs, so the props are the same on the docs on their site

Root

Name	Type	Default value	Description
defaultValue	string	-	The value of the tab to be selected by default
value	string	-	The value of the currently selected tab
onValueChange	(value: string) => void	-	Event handler called when the value changes

Trigger

Name	Type	Default value	Description
value*	string	–	A unique value for each tab list item, that associates it with it's content
disabled	boolean	false	When true, prevents the user from interacting with this tab

Content

Name	Type	Default value	Description
value*	string	–	A unique value that associates this tab's content with it's trigger