> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/list-item.md).

# List item

{% hint style="info" icon="figma" %}
Nom du composant : **listItem**
{% endhint %}

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=54-4252&page-id=54:4251&scaling=scale-down-width&starting-point-node-id=54:4252&t=XDElVfg0Aeftg9hK-1&viewport=311,308,1.85>" %}

***

### Principes

#### Contextuel

Le List Item n'existe pas de manière isolée : il prend son sens dans la liste qui l'accueille. Son contenu doit refléter précisément le contexte dans lequel il s'inscrit — qu'il s'agisse d'un choix de langue, d'une entrée de menu ou d'une valeur numérique — sans jamais introduire d'ambiguïté sur ce que représente l'élément.

#### Scannable

L'utilisateur parcourt une liste, il ne la lit pas. Le List Item doit permettre une lecture rapide et efficace : un label court et explicite, une hiérarchie visuelle claire entre les éléments de support (icône, métadonnée) et le contenu principal, pour que l'œil trouve immédiatement ce qu'il cherche.

#### Réactif

Chaque interaction avec un List Item doit produire un retour visuel immédiat et non ambigu. L'état sélectionné, survolé ou désactivé communique à l'utilisateur où il en est dans son choix, réduisant toute incertitude sur l'action en cours ou accomplie.

***

### Usage

Le List Item est le composant de base de toute liste du site. Il intervient dès qu'un ensemble d'éléments doit être présenté de manière interactable : overlays, dropdowns, panels, sidebars, listes de sélection simple ou multiple.

***

### Dos & Don'ts

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><mark style="color:green;">À faire</mark></td><td>Utiliser un label court, direct et explicite</td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>Tronquer un label sans raison : si le texte est trop long, c'est le contenu qu'il faut revoir</td></tr></tbody></table>

***

### Composant lié&#x20;

{% content-ref url="/pages/r07UlrbJzfzrC5Wfkn0n" %}
[Menu](/documentation/components/menu.md)
{% endcontent-ref %}

{% content-ref url="/pages/iK5BlTr4hokA7xl5N1Q0" %}
[Overlay](/documentation/components/overlays.md)
{% endcontent-ref %}

{% content-ref url="/pages/30r5nOoWKhRAq6EdTSe8" %}
[Input select](/documentation/components/select.md)
{% endcontent-ref %}

{% content-ref url="/pages/i09oXYjIe7ur7DjM66ag" %}
[Toggle filtre](/documentation/components/text.md)
{% endcontent-ref %}