Tabs
Represents a set of tabs that allows users to switch between different content views.
Available from eds-core/1.3.0
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { Tabs } from '@adaptavant/eds-core';
Usage
TabItem and TabContent uses the value prop to synchronise the highlighted tab with its corresponding content. So, it is recommended to ensure the value prop is unique and consistent.
Use defaultValue prop to specify the initially selected tab.
<Tabs defaultValue="integrations">
<TabList>
<TabItem value="integrations">Integrations</TabItem>
<TabItem value="services">Services</TabItem>
<TabItem value="updates">Updates</TabItem>
</TabList>
<TabContent value="integrations">Showing content for Integrations Tab</TabContent>
<TabContent value="services">Showing content for Services Tab</TabContent>
<TabContent value="updates">Showing content for Updates Tab</TabContent>
</Tabs>Size
Customise the size of the Tabs via the size prop. standard is the default.
{/* small */}
<Tabs defaultValue="integrations" size="small">
<TabList>
<TabItem value="integrations">Integrations</TabItem>
<TabItem value="services">Services</TabItem>
<TabItem value="updates">Updates</TabItem>
</TabList>
<TabContent value="integrations">Showing content for Integrations Tab</TabContent>
<TabContent value="services">Showing content for Services Tab</TabContent>
<TabContent value="updates">Showing content for Updates Tab</TabContent>
</Tabs>
{/* standard */}
<Tabs defaultValue="integrations" size="standard">
<TabList>
<TabItem value="integrations">Integrations</TabItem>
<TabItem value="services">Services</TabItem>
<TabItem value="updates">Updates</TabItem>
</TabList>
<TabContent value="integrations">Showing content for Integrations Tab</TabContent>
<TabContent value="services">Showing content for Services Tab</TabContent>
<TabContent value="updates">Showing content for Updates Tab</TabContent>
</Tabs>Disabled
Use disabled prop to disable a particular tab.
<Tabs defaultValue="integrations">
<TabList>
<TabItem value="integrations">Integrations</TabItem>
<TabItem value="services" disabled>Services</TabItem>
<TabItem value="updates">Updates</TabItem>
</TabList>
<TabContent value="integrations">Showing content for Integrations Tab</TabContent>
<TabContent value="updates">Showing content for Updates Tab</TabContent>
</Tabs>Scrollable Tabs
<Tabs defaultValue="services">
<TabList>
<TabItem value="integrations">Integrations</TabItem>
<TabItem value="services">Services</TabItem>
<TabItem value="avoid-long-labels">We should avoid more than two words in label</TabItem>
<TabItem value="working-hours">Working hours</TabItem>
<TabItem value="breaks">Breaks</TabItem>
<TabItem value="avoid-long-labels-2">We should avoid more than two words in label</TabItem>
<TabItem value="time-off">Time off</TabItem>
<TabItem value="updates">Updates</TabItem>
</TabList>
</Tabs>Controlled Behaviour
You can control the selected tab using selectedValue and onSelectedValueChange props.
const [selectedTab, setSelectedTab] = React.useState('integrations');
return (
<Tabs
selectedValue={selectedTab}
onSelectedValueChange={setSelectedTab}
>
<TabList>
<TabItem value="integrations">Integrations</TabItem>
<TabItem value="services">Services</TabItem>
<TabItem value="updates">Updates</TabItem>
</TabList>
<TabContent value="integrations">
Showing content for Integrations Tab
</TabContent>
<TabContent value="services">Showing content for Services Tab</TabContent>
<TabContent value="updates">Showing content for Updates Tab</TabContent>
</Tabs>
);Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
Tabs parts
<Tabs defaultValue="integrations" className="bg-accent-tertiary p-2">
<TabList>
<TabItem value="integrations">Integrations</TabItem>
<TabItem value="services">Services</TabItem>
<TabItem value="updates">Updates</TabItem>
</TabList>
<TabContent value="integrations">Showing content for Integrations Tab</TabContent>
<TabContent value="services">Showing content for Services Tab</TabContent>
<TabContent value="updates">Showing content for Updates Tab</TabContent>
</Tabs>No parts available. Only root.
TabList parts
const [selectedTab, setSelectedTab] = React.useState('about');
return (
<Tabs
selectedValue={selectedTab}
onSelectedValueChange={setSelectedTab}
>
<TabList
className="border border-palette-gray-border p-2"
classNames={{
tabItemWrapper: "bg-gray-200 dark:bg-neutral-active",
highlighter: "bg-positive",
scrollMaskStart: "w-12",
scrollMaskEnd: "w-12",
}}
>
<TabItem value="about">About</TabItem>
<TabItem value="integrations">Integrations</TabItem>
<TabItem value="services">Services</TabItem>
<TabItem value="workinghours">Working hours</TabItem>
<TabItem value="avoid-long-labels">We should avoid more than two words in label</TabItem>
<TabItem value="timeoff">Time off</TabItem>
<TabItem value="updates">Updates</TabItem>
<TabItem value="avoid-long-labels-2">We should avoid more than two words in label</TabItem>
</TabList>
<TabContent value="about">Showing content for About Tab</TabContent>
<TabContent value="integrations">Showing content for Integrations Tab</TabContent>
<TabContent value="services">Showing content for Services Tab</TabContent>
<TabContent value="workinghours">Showing content for Working hours Tab</TabContent>
<TabContent value="avoid-long-labels">Showing content for long label</TabContent>
<TabContent value="timeoff">Showing content for Time off Tab</TabContent>
<TabContent value="updates">Showing content for Updates Tab</TabContent>
<TabContent value="avoid-long-labels-2">Showing content for long label 2</TabContent>
</Tabs>
);
Stylable Parts | Description |
|---|---|
tabItemWrapper | Wrapper for the tab items |
highlighter | Highlights the Active tab |
scrollMaskStart | Display a mask at the beginning when multiple tab items are present, and scrolling is enabled. |
scrollMaskEnd | Display a mask at the end when multiple tab items are present, and scrolling is enabled. |
TabItem parts
<Tabs defaultValue="integrations">
<TabList>
<TabItem className="font-stronger bg-gray-100 dark:bg-neutral-active p-1" value="integrations">Integrations</TabItem>
<TabItem className="font-stronger bg-gray-100 dark:bg-neutral-active p-1" value="services">Services</TabItem>
<TabItem className="font-stronger bg-gray-100 dark:bg-neutral-active p-1" value="updates">Updates</TabItem>
</TabList>
<TabContent value="integrations">Showing content for Integrations Tab</TabContent>
<TabContent value="services">Showing content for Services Tab</TabContent>
<TabContent value="updates">Showing content for Updates Tab</TabContent>
</Tabs>No parts available. Only root.
TabContent parts
<Tabs defaultValue="integrations">
<TabList>
<TabItem value="integrations">Integrations</TabItem>
<TabItem value="services">Services</TabItem>
<TabItem value="updates">Updates</TabItem>
</TabList>
<TabContent className="p-2 bg-positive-secondary" value="integrations">Showing content for Integrations Tab</TabContent>
<TabContent className="p-2 bg-positive-secondary" value="services">Showing content for Services Tab</TabContent>
<TabContent className="p-2 bg-positive-secondary" value="updates">Showing content for Updates Tab</TabContent>
</Tabs>No parts available. Only root.
Usage guidelines
Do
- Tabs enable users to navigate between related – but distinct – content at the same level of hierarchy.
- Use tabs to organize content such as forms, settings and modals. This ensures the user doesn’t have to navigate away from their workflow to complete a task.
Don’t
- Don't use tabs for a platform’s primary navigation or menu. If tabs become complex, use standard pattern navigation.
Best practices
Do
Use sentence case for tab names. Only the first letter of the tab name is capitalized — unless the tab name is a proper noun or branded term that follows unique capitalization, e.g. “Booking Page”, “PayPal”, “Zoho CRM” or “iOS”.
Don’t
Don’t use all caps for tab names.
Do
Tab names should be two words maximum.
Don’t
Avoid using more than two words for tab names.
Do
If a container can’t display all tabs at once, use the gradient fade effect to cut off tabs furthest to the left and right.
Don’t
Don’t use ellipses for tabs that don't fit the container.
Do
Tabs that appear together have a clear association.
Don’t
Avoid creating tabs with unrelated groups of content.
Do
Use only one level of tabs per page.
Don’t
Don’t create a multiple tab structure on the same page.
Do
Tab names allow the user to navigate related groups of content.
Don’t
Don’t use tabs as a selection device for the user.