Tabs

The Tabs component is a container for tabbable content. It is composed of TabsList and TabContent components, with multiple Tab components inside the TabsList.

A Tab component accepts a value prop, which is used to identify the tab, and a title prop, which is the text displayed on the tab. This can be a string or a JSX Element. The Tab component can also accept a tally prop, which is a number to be displayed on the tab to the right of the title.

The Tabs component is accessible by keyboard–users can navigate between tabs using the arrow keys.

Polymorphic Component

By default, content is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Basic Tabs

Tabs are available in three sizes. Passing the size to the root Tabs component will adjust the size. An optional defaultActive prop can be passed to set the default active tab. Otherwise, the first tab will be made active.

First Content

First Content

First Content

import { Tabs } from '@curology/ui-components-web/react/Tabs';
import { Tabs } from '@curology/ui-components-web/react/Tabs/Tab';
import { TabsList } from '@curology/ui-components-web/react/Tabs/TabsList';
import { TabContent } from '@curology/ui-components-web/react/Tabs/TabContent';

<Tabs defaultActive="second" size="sm|md(default)|lg">
  <TabsList>
    <Tab value="first" title="First" tally="10" />
    <Tab value="second" title="Second" />
    <Tab value="third" title="Third" />
  </TabsList>
  <TabContent value="first">First Content</TabContent>
  <TabContent value="second">Second Content</TabContent>
  <TabContent value="third">Third Content</TabContent>
</Tabs>

Controlled Tabs

By default, Tabs are self-controlled. However, you can control the selected tab by passing an active prop to the Tabs component. A onActiveChange prop can also be passed to listen for tab changes.

First Content

First Content

First Content

import { useState } from 'react';
import { Tabs } from '@curology/ui-components-web/react/Tabs';
import { Tabs } from '@curology/ui-components-web/react/Tabs/Tab';
import { TabsList } from '@curology/ui-components-web/react/Tabs/TabsList';
import { TabContent } from '@curology/ui-components-web/react/Tabs/TabContent';


const [active, setActive] = useState('second');
const handleActiveChange = (value) => setActive(value);

<Tabs active={active} onActiveChange={handleActiveChange}>
  <TabsList>
    <Tab value="first" title="First" tally="10" />
    <Tab value="second" title="Second" />
    <Tab value="third" title="Third" />
  </TabsList>
  <TabContent value="first">First Content</TabContent>
  <TabContent value="second">Second Content</TabContent>
  <TabContent value="third">Third Content</TabContent>
</Tabs>

Route-Specific Tabs

To allow deep-linking to specific tabs, you can easily integrate Tabs with a router library like react-router-dom. Below is an example of using hash-based routing, but this can be adapted to any routing library.

import { useLocation } from 'react-router-dom';
import { Tabs } from '@curology/ui-components-web/react/Tabs';
import { Tabs } from '@curology/ui-components-web/react/Tabs/Tab';
import { TabsList } from '@curology/ui-components-web/react/Tabs/TabsList';
import { TabContent } from '@curology/ui-components-web/react/Tabs/TabContent';


const { hash } = useLocation();

<Tabs active={hash.replace('#', '')}>
  <TabsList>
    <Tab value="first" href="first" title="First" tally="10" />
    <Tab value="second" href="second" title="Second" />
    <Tab value="third" href="third" title="Third" />
  </TabsList>
  <TabContent value="first">First Content</TabContent>
  <TabContent value="second">Second Content</TabContent>
  <TabContent value="third">Third Content</TabContent>
</Tabs>

Props

TabsProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
active	string		No	Which tab is active?
defaultActive	string		No	Which tab is active by default?
onActiveChange	(value: string) => void		No	Handle active tab change
size	"md" | "lg" | "sm"	'md'	No	Which size tabs should be displayed?

TabsListProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
size	"md" | "lg" | "sm"	'md'	No	Which size tabs should be displayed?

TabProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
active	false | true		No	Should the tab be marked as active? Useful for when using tabs without a `Tabs` component.
disabled	false | true		No	Should the tab be disabled?
href	string		No	A link to visit instead of using a radio button.
size	"md" | "lg" | "sm"	'md'	No	Which size tab should be displayed?
tally	ReactNode		No	A numeric label used for annotating something actionable, like an unread message count
title	ReactNode		Yes	The title of the tab.
value	string		No	The unique value for the tab.

TabContentProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
value	string		Yes	When this `value` matches the `active` value of the parent `Tabs` component, this `TabContent` will be displayed.