List

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

Design

When to use it (and when not to)

Use the Simple List when you need to:

• Display groups of related items, such as options or categories.
• Present content that doesn’t require complex interaction beyond item selection or viewing.
• Integrate a list inside other container components like dropdowns (e.g. lists of options) or modals and side panels (lists of actions or links).

Do not use this component for tabular or multi-column data — in those cases, use a Data Table or similar component.

Properties

Type

Simple List

List

Type: Simple List

Show Scroll Bar: true

Has bottom cta: true

.item/List-Options

Type: Text

State: Rested

Has left icon: true

Has right icon: true

Has WLTP: true

Has line: true

Multiselect

List

Type: Multiselect

Show Scroll Bar: true

Has bottom cta: true

Checkbox

Size: Small

State: Default

Show item count: true

Layout and spacing

Type: Simple List

List

List

Direction: Horizontal

Alignment: Top left

Vertical resizing: Hug

Horizontal resizing: Fixed 455px

Simple List

Simple List

Direction: Vertical

Alignment: Top left

Vertical resizing: Fill

Horizontal resizing: Fill

Type: Multiselect

List

List

Direction: Horizontal

Alignment: Top left

Vertical resizing: Fixed

Horizontal resizing: Fixed

Frame (Checkbox List + CTA)

Frame 1171276204

Direction: Vertical

Alignment: Bottom left

Vertical resizing: Fill

Horizontal resizing: Fill

Item spacing: 16

Styling

Colors

Name	Applied as	Applied to
color-foreground-neutral-default	Text color	List option label
color-foreground-neutral-default	Text color	List option label
color-foreground-neutral-subtle	Text color	List option (hover)
color-foreground-neutral-subtle	Text color	List option (hover)
color-foreground-contrast-default	Text color	List option link (contrast)
color-foreground-contrast-default	Text color	List option link (contrast)
color-surface-neutral-subtle	Background color	List option (hover / selected)
color-surface-neutral-subtle	Background color	List option (hover / selected)
color-border-contrast-default	Border color	Divider line
color-border-contrast-default	Border color	Divider line
color-border-neutral-default	Border color	Divider line (hover)
color-border-neutral-default	Border color	Divider line (hover)
color-border-focus-neutral-default	Border color	List option (focus)
color-border-focus-neutral-default	Border color	List option (focus)

Spacing

Name	Applied as	Applied to
spacing-04	Gap / Padding block	List option
spacing-04	Gap / Padding block	List option
spacing-08	Padding block / Padding inline / Gap	List option (no image)
spacing-08	Padding block / Padding inline / Gap	List option (no image)
spacing-10	Padding inline	Checkbox control
spacing-10	Padding inline	Checkbox control

Usage

Do

Guidance on how to use a component.

• Keep list item labels concise. Aim for short, scannable text that fits naturally on one line.
• Ensure each item contains only one line of text. The component is designed for single-line labels to maintain clarity and visual consistency.
• Use clear and meaningful wording. Each label should communicate its purpose without extra detail or filler.
• Review long labels individually. If an item requires more characters, evaluate it in isolation to determine whether truncation is appropriate for that specific case.
• Use the List only for simple, straightforward options. It should present clear choices without additional descriptions or metadata.

Don’t

Guidance on what to avoid when using a component.

• Don’t include two lines of text. Multi-line labels break the component layout and the intended interaction patterns.
• Don’t truncate by default. Truncation should be an exception, not the rule. Avoid shortening content unless absolutely necessary and approved case by case.
• Don’t overload items with extra information. Only use sublabels, icons, tags, or any secondary text when needed.
• Don’t rely on the List to communicate complex messages. If the content is too long or detailed, consider a different component or content strategy.
• Don’t use inconsistent wording lengths. Excessively long items next to very short ones create visual imbalance — keep content harmonised.

Usage guidelines

Guidance on where this component has been used

Use the List component to display a set of simple, scannable options — typically within other components such as dropdowns, menus, or selection patterns. Each item should present a clear, single-line label that helps users quickly read and compare choices.

Keep the content concise to avoid layout issues and ensure a smooth browsing experience. If an item requires more text than usual, review it individually to determine whether truncation is appropriate or whether the content should be rephrased or moved to a different component.

Lists work best when presenting straightforward choices without additional metadata or complexity.

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 };

Accessibility

For developers

The List component should follow standard semantic HTML practices:

• Use <ul> or <ol> elements for the list container.
• Use <li> elements for list items.
• Ensure links have clear, descriptive text.
• Support keyboard navigation (Tab, arrow keys).
• Maintain sufficient color contrast for all text and interactive elements.