Tab

Elevate User Experience with Our Dynamic Tabs Component

Immerse your users in a seamless and organized browsing experience with our Dynamic Tabs Component. This feature-rich element transforms navigation by allowing users to effortlessly switch between content sections, enhancing both functionality and aesthetics. Empower your interface with intuitive tabbed navigation that captivates and simplifies the user journey.

Anatomy

The Tabs Component is a visually dynamic navigation element, presenting users with a set of clickable tabs that correspond to different content sections. Each tab serves as a gateway to a distinct area of information, streamlining user interaction and navigation within your application.

anatomy of tabs component

Properties

Tailor the Tabs Component to suit your design vision. Customize properties such as color, size, and typography to ensure a seamless integration into your application's overall aesthetic. With adjustable parameters, you have the creative freedom to craft a tabbed interface that aligns with your brand identity.

Kinds	States	Size	Active
Horizontal	Default	Small	Horizontal default tab
Vertical	Hovered	Medium	Horizontal active tab
	Pressed	Large	Vertical default tab
	Disabled		Vertical active tab

Kinds

• Horizontal tabs are a user interface element where tab items are arranged in a row, typically from left to right.

• Vertical tabs organize tab items in a column, usually from top to bottom. Each tab represents a separate section or content view, and the vertical layout is effective when there is ample vertical space available.

React

import React from 'react';
import { PlusTabGroup, PlusTab, PlusTabPanel } from '@plusui/react';

// Horizontal Tab Group
const HorizontalTabGroup = () => (
  <PlusTabGroup>
    <PlusTab value="1" active>Home</PlusTab>
    <PlusTab value="2"><i class="fa fa-cog"></i> Settings</PlusTab>
    <PlusTab value="3"><i class="fa fa-info-circle"></i> About</PlusTab>
    <PlusTabPanel value="1" active>Welcome to the homepage.</PlusTabPanel>
    <PlusTabPanel value="2">Adjust your settings here.</PlusTabPanel>
    <PlusTabPanel value="3">Learn more about us.</PlusTabPanel>
  </PlusTabGroup>
);

// Vertical Tab Group
const VerticalTabGroup = () => (
  <PlusTabGroup kind="vertical">
    <PlusTab value="1" active>Overview</PlusTab>
    <PlusTab value="2"><i class="fa fa-chart-line"></i> Reports</PlusTab>
    <PlusTab value="3"><i class="fa fa-users"></i> Team</PlusTab>
    <PlusTabPanel value="1" active>Here is the project overview.</PlusTabPanel>
    <PlusTabPanel value="2">Review the latest reports.</PlusTabPanel>
    <PlusTabPanel value="3">Meet our team members.</PlusTabPanel>
  </PlusTabGroup>
);

export default {
  HorizontalTabGroup,
  VerticalTabGroup,
};

Angular

<!-- Horizontal Tab Group -->
<plus-tab-group>
  <plus-tab value="1" active>Home</plus-tab>
  <plus-tab value="2"><i class="fa fa-cog"></i> Settings</plus-tab>
  <plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
  <plus-tab-panel value="1" active>Welcome to the homepage.</plus-tab-panel>
  <plus-tab-panel value="2">Adjust your settings here.</plus-tab-panel>
  <plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>

<!-- Vertical Tab Group -->
<plus-tab-group kind="vertical">
  <plus-tab value="1" active>Overview</plus-tab>
  <plus-tab value="2"><i class="fa fa-chart-line"></i> Reports</plus-tab>
  <plus-tab value="3"><i class="fa fa-users"></i> Team</plus-tab>
  <plus-tab-panel value="1" active>Here is the project overview.</plus-tab-panel>
  <plus-tab-panel value="2">Review the latest reports.</plus-tab-panel>
  <plus-tab-panel value="3">Meet our team members.</plus-tab-panel>
</plus-tab-group>

Vue

<template>
  <!-- Horizontal Tab Group -->
  <plus-tab-group>
    <plus-tab value="1" active>Home</plus-tab>
    <plus-tab value="2"><i class="fa fa-cog"></i> Settings</plus-tab>
    <plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
    <plus-tab-panel value="1" active>Welcome to the homepage.</plus-tab-panel>
    <plus-tab-panel value="2">Adjust your settings here.</plus-tab-panel>
    <plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
  </plus-tab-group>

  <!-- Vertical Tab Group -->
  <plus-tab-group kind="vertical">
    <plus-tab value="1" active>Overview</plus-tab>
    <plus-tab value="2"><i class="fa fa-chart-line"></i> Reports</plus-tab>
    <plus-tab value="3"><i class="fa fa-users"></i> Team</plus-tab>
    <plus-tab-panel value="1" active>Here is the project overview.</plus-tab-panel>
    <plus-tab-panel value="2">Review the latest reports.</plus-tab-panel>
    <plus-tab-panel value="3">Meet our team members.</plus-tab-panel>
  </plus-tab-group>
</template>

Javascript

<!-- Horizontal Tab Group -->
<plus-tab-group>
  <plus-tab value="1" active>Home</plus-tab>
  <plus-tab value="2"><i class="fa fa-cog"></i> Settings</plus-tab>
  <plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
  <plus-tab-panel value="1" active>Welcome to the homepage.</plus-tab-panel>
  <plus-tab-panel value="2">Adjust your settings here.</plus-tab-panel>
  <plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>

<!-- Vertical Tab Group -->
<plus-tab-group kind="vertical">
  <plus-tab value="1" active>Overview</plus-tab>
  <plus-tab value="2"><i class="fa fa-chart-line"></i> Reports</plus-tab>
  <plus-tab value="3"><i class="fa fa-users"></i> Team</plus-tab>
  <plus-tab-panel value="1" active>Here is the project overview.</plus-tab-panel>
  <plus-tab-panel value="2">Review the latest reports.</plus-tab-panel>
  <plus-tab-panel value="3">Meet our team members.</plus-tab-panel>
</plus-tab-group>

States

• Default tab state represents the normal, unselected condition of a tab within a tabbed interface.

• Hovered tab state responds dynamically to user interaction. It showcase a subtle visual change, such as a color shift.

• Pressed tab state is activated when a user clicks or taps on a tab, indicating that the selection is currently in progress.

• Disabled tab state indicates that a tab is temporarily inactive or not selectable. Visually, it is often subdued to convey its inactive status, and users cannot interact with a disabled tab.

React

import React from 'react';
import { PlusTabGroup, PlusTab, PlusTabPanel } from '@plusui/react';

// Entire Tab Group Disabled
const EntireGroupDisabled = () => (
  <PlusTabGroup disabled>  {/* All tabs are disabled */}
    <PlusTab value="1">Home</PlusTab>
    <PlusTab value="2" active><i class="fa fa-cog"></i> Settings</PlusTab>
    <PlusTab value="3"><i class="fa fa-info-circle"></i> About</PlusTab>
    <PlusTabPanel value="1">Welcome to the homepage.</PlusTabPanel>
    <PlusTabPanel value="2" active>Adjust your settings here.</PlusTabPanel>
    <PlusTabPanel value="3">Learn more about us.</PlusTabPanel>
  </PlusTabGroup>
);

// Individual Tab Disabled
const IndividualTabDisabled = () => (
  <PlusTabGroup>  {/* Only one tab is disabled */}
    <PlusTab value="1" disabled>Home</PlusTab>
    <PlusTab value="2" active><i class="fa fa-cog"></i> Settings</PlusTab>
    <PlusTab value="3"><i class="fa fa-info-circle"></i> About</PlusTab>
    <PlusTabPanel value="1">This tab is disabled.</PlusTabPanel>
    <PlusTabPanel value="2" active>Adjust your settings here.</PlusTabPanel>
    <PlusTabPanel value="3">Learn more about us.</PlusTabPanel>
  </PlusTabGroup>
);

export default {
  EntireGroupDisabled,
  IndividualTabDisabled,
};

Angular

<!-- Entire Tab Group Disabled -->
<plus-tab-group disabled>  <!-- All tabs are disabled -->
  <plus-tab value="1">Home</plus-tab>
  <plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
  <plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
  <plus-tab-panel value="1">Welcome to the homepage.</plus-tab-panel>
  <plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
  <plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>

<!-- Individual Tab Disabled -->
<plus-tab-group>  <!-- Only one tab is disabled -->
  <plus-tab value="1" disabled>Home</plus-tab>
  <plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
  <plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
  <plus-tab-panel value="1">This tab is disabled.</plus-tab-panel>
  <plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
  <plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>

Vue

<template>
  <!-- Entire Tab Group Disabled -->
  <plus-tab-group disabled>  <!-- All tabs are disabled -->
    <plus-tab value="1">Home</plus-tab>
    <plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
    <plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
    <plus-tab-panel value="1">Welcome to the homepage.</plus-tab-panel>
    <plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
    <plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
  </plus-tab-group>

  <!-- Individual Tab Disabled -->
  <plus-tab-group>  <!-- Only one tab is disabled -->
    <plus-tab value="1" disabled>Home</plus-tab>
    <plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
    <plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
    <plus-tab-panel value="1">This tab is disabled.</plus-tab-panel>
    <plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
    <plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
  </plus-tab-group>
</template>

Javascript

<!-- Entire Tab Group Disabled -->
<plus-tab-group disabled>  <!-- All tabs are disabled -->
  <plus-tab value="1">Home</plus-tab>
  <plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
  <plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
  <plus-tab-panel value="1">Welcome to the homepage.</plus-tab-panel>
  <plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
  <plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>

<!-- Individual Tab Disabled -->
<plus-tab-group>  <!-- Only one tab is disabled -->
  <plus-tab value="1" disabled>Home</plus-tab>
  <plus-tab value="2" active><i class="fa fa-cog"></i> Settings</plus-tab>
  <plus-tab value="3"><i class="fa fa-info-circle"></i> About</plus-tab>
  <plus-tab-panel value="1">This tab is disabled.</plus-tab-panel>
  <plus-tab-panel value="2" active>Adjust your settings here.</plus-tab-panel>
  <plus-tab-panel value="3">Learn more about us.</plus-tab-panel>
</plus-tab-group>

Size

The size property in a tabs component allows you to adjust the visual dimensions of the tabs such as small, medium, large and custom to fit various design requirements.

React

import React from 'react';
import { PlusTabGroup, PlusTab, PlusTabPanel } from '@plusui/react';

// Small Size Tab Group
const SmallTabGroup = () => (
  <PlusTabGroup size="sm">
    <PlusTab value="1">Overview</PlusTab>
    <PlusTab value="2">Details</PlusTab>
    <PlusTab value="3">Settings</PlusTab>
    <PlusTabPanel value="1">Here is an overview.</PlusTabPanel>
    <PlusTabPanel value="2">Detailed information.</PlusTabPanel>
    <PlusTabPanel value="3">Configure your settings here.</PlusTabPanel>
  </PlusTabGroup>
);

// Medium Size Tab Group
const MediumTabGroup = () => (
  <PlusTabGroup size="md">
    <PlusTab value="1">Home</PlusTab>
    <PlusTab value="2">Profile</PlusTab>
    <PlusTab value="3">Messages</PlusTab>
    <PlusTabPanel value="1">Welcome home.</PlusTabPanel>
    <PlusTabPanel value="2">Edit your profile here.</PlusTabPanel>
    <PlusTabPanel value="3">Read your messages.</PlusTabPanel>
  </PlusTabGroup>
);

// Large Size Tab Group
const LargeTabGroup = () => (
  <PlusTabGroup size="lg">
    <PlusTab value="1">Dashboard</PlusTab>
    <PlusTab value="2">Reports</PlusTab>
    <PlusTab value="3">Analytics</PlusTab>
    <PlusTabPanel value="1">View your dashboard.</PlusTabPanel>
    <PlusTabPanel value="2">Check your reports.</PlusTabPanel>
    <PlusTabPanel value="3">Analyze your data.</PlusTabPanel>
  </PlusTabGroup>
);

export default {
  SmallTabGroup,
  MediumTabGroup,
  LargeTabGroup,
};

Angular

<!-- Small Size Tab Group -->
<plus-tab-group size="sm">
  <plus-tab value="1">Overview</plus-tab>
  <plus-tab value="2">Details</plus-tab>
  <plus-tab value="3">Settings</plus-tab>
  <plus-tab-panel value="1">Here is an overview.</plus-tab-panel>
  <plus-tab-panel value="2">Detailed information.</plus-tab-panel>
  <plus-tab-panel value="3">Configure your settings here.</plus-tab-panel>
</plus-tab-group>

<!-- Medium Size Tab Group -->
<plus-tab-group size="md">
  <plus-tab value="1">Home</plus-tab>
  <plus-tab value="2">Profile</plus-tab>
  <plus-tab value="3">Messages</plus-tab>
  <plus-tab-panel value="1">Welcome home.</plus-tab-panel>
  <plus-tab-panel value="2">Edit your profile here.</plus-tab-panel>
  <plus-tab-panel value="3">Read your messages.</plus-tab-panel>
</plus-tab-group>

<!-- Large Size Tab Group -->
<plus-tab-group size="lg">
  <plus-tab value="1">Dashboard</plus-tab>
  <plus-tab value="2">Reports</plus-tab>
  <plus-tab value="3">Analytics</plus-tab>
  <plus-tab-panel value="1">View your dashboard.</plus-tab-panel>
  <plus-tab-panel value="2">Check your reports.</plus-tab-panel>
  <plus-tab-panel value="3">Analyze your data.</plus-tab-panel>
</plus-tab-group>

Vue

<template>
  <!-- Small Size Tab Group -->
  <plus-tab-group size="sm">
    <plus-tab value="1">Overview</plus-tab>
    <plus-tab value="2">Details</plus-tab>
    <plus-tab value="3">Settings</plus-tab>
    <plus-tab-panel value="1">Here is an overview.</plus-tab-panel>
    <plus-tab-panel value="2">Detailed information.</plus-tab-panel>
    <plus-tab-panel value="3">Configure your settings here.</plus-tab-panel>
  </plus-tab-group>

  <!-- Medium Size Tab Group -->
  <plus-tab-group size="md">
    <plus-tab value="1">Home</plus-tab>
    <plus-tab value="2">Profile</plus-tab>
    <plus-tab value="3">Messages</plus-tab>
    <plus-tab-panel value="1">Welcome home.</plus-tab-panel>
    <plus-tab-panel value="2">Edit your profile here.</plus-tab-panel>
    <plus-tab-panel value="3">Read your messages.</plus-tab-panel>
  </plus-tab-group>

  <!-- Large Size Tab Group -->
  <plus-tab-group size="lg">
    <plus-tab value="1">Dashboard</plus-tab>
    <plus-tab value="2">Reports</plus-tab>
    <plus-tab value="3">Analytics</plus-tab>
    <plus-tab-panel value="1">View your dashboard.</plus-tab-panel>
    <plus-tab-panel value="2">Check your reports.</plus-tab-panel>
    <plus-tab-panel value="3">Analyze your data.</plus-tab-panel>
  </plus-tab-group>
</template>

Javascript

<plus-tab-group size="sm">
  <plus-tab value="1"> Lorem Ipsum </plus-tab>
  <plus-tab value="2"><i class="fa fa-home"></i> Dolor Sit </plus-tab>
  <plus-tab value="3"><i class="fa fa-home"></i> Amet </plus-tab>
  <plus-tab-panel value="1"> Lorem ipsum dolor sit amet </plus-tab-panel>
  <plus-tab-panel value="2"> Dolor sit amet consectetur adipisicing elit. </plus-tab-panel>
  <plus-tab-panel value="3"> Amet consectetur adipisicing elit. </plus-tab-panel>
</plus-tab-group>
<plus-tab-group size="md">
  <plus-tab value="1"> Lorem Ipsum </plus-tab>
  <plus-tab value="2"><i class="fa fa-home"></i> Dolor Sit </plus-tab>
  <plus-tab value="3"><i class="fa fa-home"></i> Amet </plus-tab>
  <plus-tab-panel value="1"> Lorem ipsum dolor sit amet </plus-tab-panel>
  <plus-tab-panel value="2"> Dolor sit amet consectetur adipisicing elit. </plus-tab-panel>
  <plus-tab-panel value="3"> Amet consectetur adipisicing elit. </plus-tab-panel>
</plus-tab-group>
<plus-tab-group size="lg">
  <plus-tab value="1"> Lorem Ipsum </plus-tab>
  <plus-tab value="2"><i class="fa fa-home"></i> Dolor Sit </plus-tab>
  <plus-tab value="3"><i class="fa fa-home"></i> Amet </plus-tab>
  <plus-tab-panel value="1"> Lorem ipsum dolor sit amet </plus-tab-panel>
  <plus-tab-panel value="2"> Dolor sit amet consectetur adipisicing elit. </plus-tab-panel>
  <plus-tab-panel value="3"> Amet consectetur adipisicing elit. </plus-tab-panel>
</plus-tab-group>

Layout & Spacing

Achieve precision in design with our Tabs Component's flexible layout and spacing options. Define the placement, alignment, and spacing between tabs, allowing you to create a visually balanced and cohesive interface that meets your specific design requirements.

layout and spacing of tabs component

Light & Dark Mode

Seamlessly adapt to user preferences with our Tabs Component's built-in support for both light and dark modes. Enhance readability and aesthetics by effortlessly transitioning between these modes, ensuring a consistent and visually appealing experience across different environments.

light and dark mode of tabs component

Accessibility

Prioritize inclusivity with our Tabs Component's commitment to accessibility. Engineered with industry-leading standards, it guarantees a user-friendly experience for all individuals, including those with disabilities. Screen reader compatibility, keyboard navigation, and high contrast options make our Tabs Component accessible to a diverse user base.

Criteria	Description	Status
ARIA Attributes	Ensures ARIA attributes are allowed for an element's role	Passed
ARIA Roles	Ensures role attribute has an appropriate value for the element	Passed
ARIA-Hidden Elements	Ensures aria-hidden elements are not focusable nor contain focusable elements	Passed
Required ARIA Attributes	Ensures elements with ARIA roles have all required ARIA attributes	Passed
Role Attributes	Ensures all elements with a role attribute use a valid value	Passed
Valid Values	Ensures all ARIA attributes have valid values	Passed
Inline text spacing	Ensure that text spacing set through style attributes can be adjusted with custom stylesheets	Passed
Unique ID Attribute	Ensures every id attribute value is unique	Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.	AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
kind	Sets the orientation of the tab group	String	horizontal, vertical	horizontal
active	The value of the active tab	String	Any valid tab value	null
disabled	Disables the entire tab group	Boolean	true, false	false
size	Determines the size of the tab group	String	sm, md, lg	md