React

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

Properties

SegmentedControl composes a single-select set from radio-like items. The following props are commonly supported (implementation may vary):

Prop	Type	Description	Required
items	{ label: string; value: string; icon?: ReactNode; disabled?: boolean }[]	Array of segments to render (label + value, optional icon/disabled).	✅
name	string	Shared name for the underlying radios. If omitted, one is generated.
defaultValue	string	Initial selected value (uncontrolled mode).
value	string	Controlled selected value.
onChange	(value: string) => void	Fired when selection changes.
size	'sm' | 'md' | 'lg'	Visual size. Default is 'md'.
isIcon	boolean	Compact icon-only variant.
disabled	boolean	Disable the entire control.
className	ClassValue	Custom class names for the wrapper element.
ariaLabel	string	Accessible label for the whole group (used when no visible legend is present).

Examples

Basic usage

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

const BasicSegmented = () => {
  const items = [
    { label: 'List', value: 'list' },
    { label: 'Map', value: 'map' },
    { label: 'Grid', value: 'grid' },
  ];

  return (
    <SegmentedControl items={items} defaultValue="list" ariaLabel="View mode" />
  );
};

export { BasicSegmented };

With icons

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

const IconSegmented = () => {
  const items = [
    {
      label: 'List',
      value: 'list',
      icon: <span className="tng-icon icon-list-ul" aria-hidden="true" />,
    },
    {
      label: 'Map',
      value: 'map',
      icon: <span className="tng-icon icon-map" aria-hidden="true" />,
    },
  ];

  return (
    <SegmentedControl items={items} defaultValue="list" ariaLabel="Map view" />
  );
};

export { IconSegmented };

Icon-only

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

const IconOnlySegmented = () => {
  const items = [
    {
      label: 'List',
      value: 'list',
      icon: <span className="tng-icon icon-list-ul" aria-hidden="true" />,
    },
    {
      label: 'Calendar',
      value: 'calendar',
      icon: <span className="tng-icon icon-calendar" aria-hidden="true" />,
    },
  ];

  return (
    <SegmentedControl
      items={items}
      defaultValue="list"
      isIcon
      ariaLabel="Schedule view"
    />
  );
};

export { IconOnlySegmented };

Sizes

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

const SizesSegmented = () => {
  const items = [
    { label: 'Day', value: 'day' },
    { label: 'Week', value: 'week' },
    { label: 'Month', value: 'month' },
  ];

  return (
    <>
      <SegmentedControl
        items={items}
        defaultValue="day"
        size="sm"
        ariaLabel="Range (small)"
      />
      <SegmentedControl
        items={items}
        defaultValue="day"
        size="md"
        ariaLabel="Range (medium)"
      />
      <SegmentedControl
        items={items}
        defaultValue="day"
        size="lg"
        ariaLabel="Range (large)"
      />
    </>
  );
};

export { SizesSegmented };

Disabled

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

const DisabledSegmented = () => {
  const items = [
    { label: 'List', value: 'list' },
    { label: 'Map', value: 'map' },
  ];

  return (
    <SegmentedControl
      items={items}
      defaultValue="list"
      disabled
      ariaLabel="View (disabled)"
    />
  );
};

export { DisabledSegmented };