# Tab Tabs organize related content into separate sections, allowing users to switch between views within the same page without navigating away. They help improve content discoverability, reduce visual clutter, and provide a structured browsing experience. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tab--introduction ## Variants documented in Storybook - HorizontalTabs: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tab--horizontaltabs - InteractiveTabs: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tab--interactivetabs - VerticalTabs: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tab--verticaltabs ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Tab. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Horizontal Tabs — Horizontal Underline Tabs HTML: ```html
``` React: ```jsx import React from 'react'; const TabExample1Demo = () => ( <> {/* Variant: Horizontal Underline Tabs - Small */}
{/* Variant: Horizontal Underline Tabs - Medium */}
{/* Variant: Horizontal Underline Tabs - Large */}
); export default TabExample1Demo; ``` Angular: ```html
``` ### 2. Horizontal Tabs — Horizontal Pill Tabs HTML: ```html
``` React: ```jsx import React from 'react'; const TabExample2Demo = () => ( <> {/* Variant: Horizontal Pill Tabs - Small */}
{/* Variant: Horizontal Pill Tabs - Medium */}
{/* Variant: Horizontal Pill Tabs - Large */}
); export default TabExample2Demo; ``` Angular: ```html
``` ### 3. Interactive Tabs — Interactive Tab Panels HTML: ```html
Overview — Summary of all content across the system.
Details — Comprehensive information about the selected item.
Settings — Manage your preferences and configuration.
Analytics — Charts, KPIs and usage metrics.
Reports — Export and view generated reports.
History — Past activity and audit log.
``` React: ```jsx import React from 'react'; const TabExample3Demo = () => ( <> {/* Variant: Interactive Tabs - Linked Panels */}
Overview — Summary of all content across the system.
Details — Comprehensive information about the defaultSelected item.
Settings — Manage your preferences and configuration.
Analytics — Charts, KPIs and usage metrics.
Reports — Export and view generated reports.
History — Past activity and audit log.
); export default TabExample3Demo; ``` Angular: ```html
Overview — Summary of all content across the system.
Details — Comprehensive information about the selected item.
Settings — Manage your preferences and configuration.
Analytics — Charts, KPIs and usage metrics.
Reports — Export and view generated reports.
History — Past activity and audit log.
``` ### 4. Introduction — Introduction HTML: ```html
Components

Tab

Tabs organize related content into separate sections, allowing users to switch between views within the same page without navigating away. They help improve content discoverability, reduce visual clutter, and provide a structured browsing experience.

Horizontal Tabs Showcase

Live previews taken directly from the horizontal Tab showcase blocks in src/index.html.

Underline
Small
Medium
Large
Pill
Small
Medium
Large

Interactive Panels Showcase

The linked tab-panel demo is preserved as-is from the source showcase.

Overview — Summary of all content across the system.
Details — Comprehensive information about the selected item.
Settings — Manage your preferences and configuration.
Analytics — Charts, KPIs and usage metrics.
Reports — Export and view generated reports.
History — Past activity and audit log.

Vertical Tabs Showcase

Live previews taken directly from the vertical Tab showcase blocks in src/index.html.

Underline
Small
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Medium
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Large
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content
Pill
Small
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Medium
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Large
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content

CSS Class Reference

Classes used by the showcased Tab variants only.

Layout

Tab container ux4g-tab
Tab list wrapper ux4g-tab-list
Tab trigger item ux4g-tab-item
Tab panel content ux4g-tab-panel
Overflow trigger tab ux4g-tab-more
Overflow icon wrapper ux4g-tab-more-icon
Overflow dropdown list ux4g-tab-dropdown-list
Dropdown item with panel target ux4g-tab-dropdown-item
Vertical tab layout ux4g-tab-vertical

Variants

Underline tab style ux4g-tab-underline
Pill tab style ux4g-tab-pill
Small size ux4g-tab-sm
Medium size ux4g-tab-md
Large size ux4g-tab-lg
Active tab or panel state is-active
``` React: ```jsx import React from 'react'; const TabExample4Demo = () => ( <>
Components

Tab

Tabs organize related content into separate sections, allowing users to switch between views within the same page without navigating away. They help improve content discoverability, reduce visual clutter, and provide a structured browsing experience.

Horizontal Tabs Showcase

Live previews taken directly from the horizontal Tab showcase blocks in src/index.html .

Underline
Small
  • Label
  • Label
  • Label
  • More
Medium
  • Label
  • Label
  • Label
  • More
Large
  • Label
  • Label
  • Label
  • More
Pill
Small
  • Label
  • Label
  • Label
  • More
Medium
  • Label
  • Label
  • Label
  • More
Large
  • Label
  • Label
  • Label
  • More

Interactive Panels Showcase

The linked tab-panel demo is preserved as-is from the source showcase.

  • Overview
  • Details
  • Settings
  • More
Overview — Summary of all content across the system.
Details — Comprehensive information about the defaultSelected item.
Settings — Manage your preferences and configuration.
Analytics — Charts, KPIs and usage metrics.
Reports — Export and view generated reports.
History — Past activity and audit log.

Vertical Tabs Showcase

Live previews taken directly from the vertical Tab showcase blocks in src/index.html .

Underline
Small
  • Label
  • Label
  • Label
  • Label
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Medium
  • Label
  • Label
  • Label
  • Label
  • Label
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Large
  • Label
  • Label
  • Label
  • Label
  • Label
  • Label
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content
Pill
Small
  • Label
  • Label
  • Label
  • Label
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Medium
  • Label
  • Label
  • Label
  • Label
  • Label
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Large
  • Label
  • Label
  • Label
  • Label
  • Label
  • Label
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content

CSS Class Reference

Classes used by the showcased Tab variants only.

Layout

Tab container ux4g-tab
Tab list wrapper ux4g-tab-list
Tab trigger item ux4g-tab-item
Tab panel content ux4g-tab-panel
Overflow trigger tab ux4g-tab-more
Overflow icon wrapper ux4g-tab-more-icon
Overflow dropdown list ux4g-tab-dropdown-list
Dropdown item with panel target ux4g-tab-dropdown-item
Vertical tab layout ux4g-tab-vertical

Variants

Underline tab style ux4g-tab-underline
Pill tab style ux4g-tab-pill
Small size ux4g-tab-sm
Medium size ux4g-tab-md
Large size ux4g-tab-lg
Active tab or panel state is-active
); export default TabExample4Demo; ``` Angular: ```html
Components

Tab

Tabs organize related content into separate sections, allowing users to switch between views within the same page without navigating away. They help improve content discoverability, reduce visual clutter, and provide a structured browsing experience.

Horizontal Tabs Showcase

Live previews taken directly from the horizontal Tab showcase blocks in src/index.html.

Underline
Small
Medium
Large
Pill
Small
Medium
Large

Interactive Panels Showcase

The linked tab-panel demo is preserved as-is from the source showcase.

Overview — Summary of all content across the system.
Details — Comprehensive information about the selected item.
Settings — Manage your preferences and configuration.
Analytics — Charts, KPIs and usage metrics.
Reports — Export and view generated reports.
History — Past activity and audit log.

Vertical Tabs Showcase

Live previews taken directly from the vertical Tab showcase blocks in src/index.html.

Underline
Small
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Medium
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Large
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content
Pill
Small
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Medium
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Large
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content

CSS Class Reference

Classes used by the showcased Tab variants only.

Layout

Tab container ux4g-tab
Tab list wrapper ux4g-tab-list
Tab trigger item ux4g-tab-item
Tab panel content ux4g-tab-panel
Overflow trigger tab ux4g-tab-more
Overflow icon wrapper ux4g-tab-more-icon
Overflow dropdown list ux4g-tab-dropdown-list
Dropdown item with panel target ux4g-tab-dropdown-item
Vertical tab layout ux4g-tab-vertical

Variants

Underline tab style ux4g-tab-underline
Pill tab style ux4g-tab-pill
Small size ux4g-tab-sm
Medium size ux4g-tab-md
Large size ux4g-tab-lg
Active tab or panel state is-active
``` ### 5. Vertical Tabs — Vertical Underline Tabs HTML: ```html
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content
``` React: ```jsx import React from 'react'; const TabExample5Demo = () => ( <> {/* Variant: Vertical Underline Tabs - Small */}
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
{/* Variant: Vertical Underline Tabs - Medium */}
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
{/* Variant: Vertical Underline Tabs - Large */}
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content
); export default TabExample5Demo; ``` Angular: ```html
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content
``` ### 6. Vertical Tabs — Vertical Pill Tabs HTML: ```html
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content
``` React: ```jsx import React from 'react'; const TabExample6Demo = () => ( <> {/* Variant: Vertical Pill Tabs - Small */}
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
{/* Variant: Vertical Pill Tabs - Medium */}
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
{/* Variant: Vertical Pill Tabs - Large */}
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content
); export default TabExample6Demo; ``` Angular: ```html
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 1 content
Panel 2 content
Panel 3 content
Panel 4 content
Panel 5 content
Panel 6 content
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.