Develop

Styles

<ul class="tng-list">
  <li class="tng-list-option">Option 1</li>
  <li class="tng-list-option">Option 2</li>
</ul>

• Option 1
• Option 2

Elements

Icons

<div class="tng-list-option">
  <i aria-hidden="true" class="tng-icon icon-car is-md"></i>
  Option 1
  <i
    aria-hidden="true"
    class="tng-icon icon-chevron-right tng-rtl-flip-x"
  ></i>
</div>

Option 1

Image

<ul class="tng-list">
  <li class="tng-list-option">
    <img src="/_astro/prius.B6m1c0f0.png" role="presentation" />
    <span>Toyota Prius</span>
  </li>
</ul>

• Toyota Prius

Content

Checkbox Control

<div class="tng-list-option">
  <label class="tng-checkbox-control">
    <input type="checkbox" />
    <span>Option 1</span>
  </label>
</div>

Option 1

Interactive Content

You can wrap the content of a list option in an interactive element, such as a link or button, to make the entire option clickable.

<div class="tng-list-option">
  <button>
    <i aria-hidden="true" class="tng-icon icon-car is-md"></i>
    <span>Option 1</span>
    <i
      aria-hidden="true"
      class="tng-icon icon-chevron-right tng-rtl-flip-x"
    ></i>
  </button>
</div>

Option 1

Powertrain Option

There’s a special layout for powertrain options that includes an icon, subtitle, and additional info.

<li class="tng-list-option">
  <img role="presentation" src="/_astro/prius.B6m1c0f0.png" />
  <div class="tng-list-powertrain">
    <div class="tng-list-powertrain-subtitle">
      <em>
        <i class="tng-icon icon-plug-droplet"></i>
        <span>Powertrain</span>
      </em>
      <div>333 mi</div>
    </div>
    <div>Toyota Prius</div>
  </div>
</li>

Powertrain

333 mi

Toyota Prius

Modules

Login Menu

<ul class="tng-list | tng-has-dividers">
  <li class="tng-list-option">
    <a class="pb-lg" href="#">
      <span>My Vehicles</span>
      <i
        aria-hidden="true"
        class="tng-icon icon-chevron-right tng-rtl-flip-x"
      ></i>
    </a>
  </li>
  <li class="tng-list-option">
    <a class="pb-lg" href="#">
      <span>My finance</span>
      <i
        aria-hidden="true"
        class="tng-icon icon-chevron-right tng-rtl-flip-x"
      ></i>
    </a>
  </li>
  <li class="tng-list-option">
    <a class="pb-lg" href="#">
      <span>My Toyota App</span>
      <i
        aria-hidden="true"
        class="tng-icon icon-chevron-right tng-rtl-flip-x"
      ></i>
    </a>
  </li>
  <li class="tng-list-option">
    <a class="pb-lg" href="#">
      <span>My Rewards</span>
      <i
        aria-hidden="true"
        class="tng-icon icon-chevron-right tng-rtl-flip-x"
      ></i>
    </a>
  </li>
</ul>

• My Vehicles
• My finance
• My Toyota App
• My Rewards

Plain List

<ol class="tng-plain-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>
    Nested ordered list
    <ol>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ol>
  </li>
  <li>
    Nested unordered list
    <ul>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ul>
  </li>
</ol>

1. List item 1
2. List item 2
3. Nested ordered list
   1. Nested list item 1
   2. Nested list item 2
4. Nested unordered list
   • Nested list item 1
   • Nested list item 2

<ul class="tng-plain-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>
    Nested ordered list
    <ol>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ol>
  </li>
  <li>
    Nested unordered list
    <ul>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ul>
  </li>
</ul>

• List item 1
• List item 2
• Nested ordered list
  1. Nested list item 1
  2. Nested list item 2
• Nested unordered list
  • Nested list item 1
  • Nested list item 2

React

Import the List and ListItem components from @tmedxp/react-components.

Properties

ListProperties extends PropsWithChildren<...>.

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.	✅

ListItemProperties extends AnchorHTMLAttributes<HTMLAnchorElement>.

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

Example

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

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

export { SimpleList };