React

Import the Tabs component from @tmedxp/react-components.

Properties

TabsProperties extends ComponentProps<'div'> (excluding onChange and className), meaning it includes all standard HTML attributes that can be applied to a <div>.

Prop	Type	Description	Required
items	TabItemData[]	Array of tab items to render.	✅
tabListAriaLabel	string	Accessible label for the tablist container.	✅
defaultValue	string	Initially selected tab value (uncontrolled mode).
activeValue	string	Currently selected tab value (controlled mode).
onChange	(value: string) => void	Callback fired when the selected tab changes.
variant	'default' | 'filled' | 'ev' | 'ev-filled'	Visual variant. Default is 'default'.
controls	ReactNode | ((props: TabControlsRenderProperties) => ReactNode)	Custom controls replacing the default overflow navigation.
hideControls	boolean	Explicitly hide or show overflow controls. Auto-shown when items > 3.
idPrefix	string	Prefix for generated tab/panel IDs. Falls back to useId().
className	ClassValue	Custom class names for the wrapper element.
scrollPreviousAriaLabel	string	Accessible label for the scroll-previous button.
scrollNextAriaLabel	string	Accessible label for the scroll-next button.

TabItemData

Each item in the items array follows this shape:

Prop	Type	Description	Required
title	string	Tab label text.	✅
value	string	Unique identifier for the tab.	✅
content	ReactNode	Panel content rendered when the tab is active.
label	string	Category label displayed above the title.
image	ReactNode	Image or media displayed in the tab item.
badge	string | number	Badge counter displayed after the title.
disabled	boolean	Disables the tab (skipped during keyboard navigation).
isLoading	boolean	Shows loading state in the panel instead of content.
loadingContent	ReactNode	Custom loading indicator (defaults to “Loading content…”).

TabControlsRenderProperties

When passing a render function to controls, it receives:

Prop	Type	Description
activeValue	string	Currently selected tab value.
activeIndex	number	Index of the active tab among enabled items.
enabledItems	TabItemData[]	Filtered list of non-disabled items.
items	TabItemData[]	Full items array.
scrollIndex	number	Current carousel scroll snap index.
scrollCount	number	Total number of scroll snap points.
canScrollPrevious	boolean	Whether scrolling backward is possible.
canScrollNext	boolean	Whether scrolling forward is possible.
selectTab	(value: string) => void	Select a tab by value.
selectPreviousTab	() => void	Select the previous enabled tab.
selectNextTab	() => void	Select the next enabled tab.

Examples

Basic usage

import { Tabs } from '@tmedxp/react-components';

const BasicTabs = () => {
  const items = [
    { title: 'Tab 1', value: 'tab-1', content: 'Tab 1 content goes here.' },
    { title: 'Tab 2', value: 'tab-2', content: 'Tab 2 content goes here.' },
    { title: 'Tab 3', value: 'tab-3', content: 'Tab 3 content goes here.' },
  ];

  return (
    <Tabs items={items} defaultValue="tab-1" tabListAriaLabel="Example tabs" />
  );
};

export { BasicTabs };

Advanced structure

import { Tabs } from '@tmedxp/react-components';

const AdvancedTabs = () => {
  const items = [
    {
      label: 'Category',
      title: 'Overview',
      value: 'overview',
      badge: 1,
      image: <img src="/models/yaris.webp" alt="" />,
      content: 'Overview content goes here.',
    },
    {
      label: 'Category',
      title: 'Features',
      value: 'features',
      badge: 3,
      image: <img src="/models/corolla.webp" alt="" />,
      content: 'Features content goes here.',
    },
    {
      label: 'Category',
      title: 'Specifications',
      value: 'specifications',
      image: <img src="/models/camry.webp" alt="" />,
      content: 'Specifications content goes here.',
    },
  ];

  return (
    <Tabs
      items={items}
      defaultValue="overview"
      tabListAriaLabel="Advanced tabs with labels, images and badge counters"
    />
  );
};

export { AdvancedTabs };

With custom controls

Use a render function in controls to replace the default overflow chevrons with a count indicator or any custom navigation.

import { CountIndicator, Tabs } from '@tmedxp/react-components';

const TabsWithCountIndicator = () => {
  const items = [
    { title: 'Yaris', value: 'yaris', content: '…' },
    { title: 'Corolla', value: 'corolla', content: '…' },
    { title: 'Camry', value: 'camry', content: '…' },
    { title: 'RAV4', value: 'rav4', content: '…' },
    { title: 'Highlander', value: 'highlander', content: '…' },
  ];

  return (
    <Tabs
      items={items}
      defaultValue="yaris"
      tabListAriaLabel="Toyota car models"
      controls={({
        scrollIndex,
        scrollCount,
        selectPreviousTab,
        selectNextTab,
      }) => (
        <CountIndicator
          index={scrollIndex}
          total={scrollCount}
          prevAriaLabel="Previous tab"
          nextAriaLabel="Next tab"
          helperOfLabel="of"
          onPrev={selectPreviousTab}
          onNext={selectNextTab}
        />
      )}
    />
  );
};

export { TabsWithCountIndicator };

EV variant

import { Tabs } from '@tmedxp/react-components';

const EvTabs = () => {
  const items = [
    { title: 'Charging', value: 'charging', content: 'Charging info.' },
    { title: 'Range', value: 'range', content: 'Range details.' },
    { title: 'Battery', value: 'battery', content: 'Battery specs.' },
  ];

  return (
    <Tabs
      items={items}
      defaultValue="charging"
      variant="ev"
      tabListAriaLabel="EV tools tabs"
    />
  );
};

export { EvTabs };

Disabled items

import { Tabs } from '@tmedxp/react-components';

const TabsWithDisabled = () => {
  const items = [
    {
      title: 'Available',
      value: 'available',
      content: 'Available content.',
    },
    {
      title: 'Coming soon',
      value: 'coming-soon',
      disabled: true,
      content: '',
    },
    {
      title: 'Also available',
      value: 'also-available',
      content: 'More content.',
    },
  ];

  return (
    <Tabs
      items={items}
      defaultValue="available"
      tabListAriaLabel="Tabs with disabled option"
    />
  );
};

export { TabsWithDisabled };

Loading state

import { Tabs } from '@tmedxp/react-components';

const TabsWithLoading = () => {
  const items = [
    { title: 'Loaded', value: 'loaded', content: 'Content ready.' },
    {
      title: 'Loading',
      value: 'loading',
      isLoading: true,
      loadingContent: <span>Fetching content...</span>,
      content: 'This appears after loading completes.',
    },
  ];

  return (
    <Tabs
      items={items}
      defaultValue="loaded"
      tabListAriaLabel="Tabs with loading state"
    />
  );
};

export { TabsWithLoading };