React

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

Properties

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

Prop	Type	Description	Required
items	TabPickerItemData[]	Options rendered by the picker.	✅
label	string	Group label shown above the picker and used as aria-label.
defaultValue	string	Initially selected value (uncontrolled mode).
activeValue	string	Currently selected value (controlled mode).
onChange	(value: string) => void	Callback fired when the selected value changes.
variant	'default' | 'filled' | 'ev' | 'ev-filled'	Visual variant. Default is 'default'.
className	ClassValue	Custom class names for the wrapper element.

The React implementation renders at most 4 options. When more than 4 items are passed, only the first 4 are rendered.

TabPickerItemData

Each item in the items array follows this shape:

Prop	Type	Description	Required
title	string	Option label text.	✅
value	string	Unique identifier for the option.	✅
disabled	boolean	Disables the option.

Examples

Basic usage

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

const BasicTabPicker = () => {
  return (
    <TabPicker
      label="Battery"
      defaultValue="75kwh"
      items={[
        { title: '50 kWh', value: '50kwh' },
        { title: '75 kWh', value: '75kwh' },
        { title: '100 kWh', value: '100kwh' },
      ]}
    />
  );
};

Controlled value

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

const ControlledTabPicker = () => {
  const [value, setValue] = useState('hybrid');

  return (
    <>
      <TabPicker
        label="Powertrain"
        activeValue={value}
        onChange={setValue}
        items={[
          { title: 'Hybrid', value: 'hybrid' },
          { title: 'Plug-in Hybrid', value: 'phev' },
          { title: 'Battery Electric', value: 'bev' },
        ]}
      />
      <p>Selected value: {value}</p>
    </>
  );
};

EV filled variant

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

const EvFilledTabPicker = () => {
  return (
    <TabPicker
      label="Wheels"
      variant="ev-filled"
      items={[
        { title: '18"', value: '18' },
        { title: '19"', value: '19' },
        { title: '20"', value: '20' },
        { title: '21"', value: '21' },
      ]}
    />
  );
};

With disabled options

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

const TabPickerWithDisabled = () => {
  return (
    <TabPicker
      label="Battery"
      variant="filled"
      items={[
        { title: '50 kWh', value: '50kwh' },
        { title: '75 kWh', value: '75kwh', disabled: true },
        { title: '100 kWh', value: '100kwh' },
      ]}
    />
  );
};