Simple List

Description

The Simple List component renders a collection of items as anchor links. Each item can display an icon and a label, making it useful for navigation menus or compact link groups.

Component

Properties

The ListProperties extends PropsWithChildren> which means it accepts children.

Prop	Type	Description	Optional
hasDivider	boolean	Whether to display a divider.	✅
type	'simple' | 'multiselect'	Defines the component behavior.	✅
className	string	Additional CSS class names for styling.	✅

The ListItemProperties extends AnchorHTMLAttributes<HTMLAnchorElement> which means it supports all standard HTML anchor attributes.

Prop	Type	Description	Optional
iconName	IconProperties['name']	Icon name to display from the library.	✅
isSelected	boolean	Defines whether the list item is currently selected.	✅
label	string	The text label displayed in the anchor.	✅
showTrailingIcon	boolean	Icon displayed after the anchor label.	✅

Examples

Simple List with ListItem

import { List, ListItem } from '@tmedxp/react-components';

const SimpleList = () => {
  return (
    <List>
      <ListItem
        key={1}
        label="FR"
        iconName="settings"
        showTrailingIcon={true}
        isSelected={false}
        href="https://www.toyota.fr"
      />
      <ListItem
        key={2}
        label="BE"
        iconName="profile"
        showTrailingIcon={true}
        isSelected={false}
        href="https://www.toyota.be"
      />
    </List>
  );
};

export { SimpleList };

Simple List with a Custom List

import { List, ListItem } from '@tmedxp/react-components';

const SimpleList = () => {
  return (
    <List hasDivider={true}>
      <li
        key={1}
        className="tng-list-option focus-within"
        style={{ justifyContent: 'flex-start' }}
        aria-selected={false}
        tabIndex={0}
        role="option"
      >
        <Icon name="profile" size="md" />
        <div style={{ flexDirection: 'column', display: 'flex' }}>
          <span className="tng-text-body is-8">profile</span>
          <span className="tng-text-body">Option 1</span>
        </div>
      </li>
    </List>
  );
};

export { SimpleList };

Storybook

https://stunning-adventure-o796gr1.pages.github.io/react-components/?path=/docs/react-components-components-list-simple-list—docs