React

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

Properties

DropdownProperties 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	DropdownItemData[]	Options rendered in the dropdown list.	✅
label	string	Label displayed above the trigger.	✅
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.
helperText	string	Optional helper text displayed below the trigger.
filled	boolean	Shows filled variant with subtle background.
disabled	boolean	Disables the dropdown trigger.
className	ClassValue	Custom class names for the wrapper element.

DropdownItemData

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 { Dropdown } from '@tmedxp/react-components';

const BasicDropdown = () => {
  return (
    <Dropdown
      label="Powertrain"
      defaultValue="hybrid"
      items={[
        { title: 'Hybrid', value: 'hybrid' },
        { title: 'Plug-in Hybrid', value: 'phev' },
        { title: 'Battery Electric', value: 'bev' },
      ]}
    />
  );
};

Controlled value

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

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

  return (
    <>
      <Dropdown
        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>
    </>
  );
};

With helper text

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

const DropdownWithHelper = () => {
  return (
    <Dropdown
      label="Battery capacity"
      helperText="Choose your preferred battery size"
      defaultValue="75kwh"
      items={[
        { title: '50 kWh', value: '50kwh' },
        { title: '75 kWh', value: '75kwh' },
        { title: '100 kWh', value: '100kwh' },
      ]}
    />
  );
};

Filled variant

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

const FilledDropdown = () => {
  return (
    <Dropdown
      label="Model"
      filled
      defaultValue="yaris"
      items={[
        { title: 'Yaris', value: 'yaris' },
        { title: 'Corolla', value: 'corolla' },
        { title: 'Camry', value: 'camry' },
      ]}
    />
  );
};

With disabled options

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

const DropdownWithDisabled = () => {
  return (
    <Dropdown
      label="Color"
      defaultValue="white"
      items={[
        { title: 'White', value: 'white' },
        { title: 'Black', value: 'black', disabled: true },
        { title: 'Silver', value: 'silver' },
        { title: 'Blue', value: 'blue', disabled: true },
      ]}
    />
  );
};

Disabled dropdown

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

const DisabledDropdown = () => {
  return (
    <Dropdown
      label="Wheels"
      disabled
      defaultValue="18"
      items={[
        { title: '18"', value: '18' },
        { title: '19"', value: '19' },
        { title: '20"', value: '20' },
      ]}
    />
  );
};

Multiple dropdowns

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

const MultipleDropdowns = () => {
  const [powertrain, setPowertrain] = useState('hybrid');
  const [battery, setBattery] = useState('75kwh');

  return (
    <>
      <Dropdown
        label="Powertrain"
        activeValue={powertrain}
        onChange={setPowertrain}
        items={[
          { title: 'Hybrid', value: 'hybrid' },
          { title: 'Plug-in Hybrid', value: 'phev' },
          { title: 'Battery Electric', value: 'bev' },
        ]}
      />
      <Dropdown
        label="Battery capacity"
        activeValue={powertrain === 'bev' ? battery : 'none'}
        onChange={setBattery}
        disabled={powertrain !== 'bev'}
        items={[
          { title: 'Not applicable', value: 'none' },
          { title: '50 kWh', value: '50kwh' },
          { title: '75 kWh', value: '75kwh' },
          { title: '100 kWh', value: '100kwh' },
        ]}
      />
    </>
  );
};