Formulaire

FieldLabel

Ce qu'il est. Le mot qui nomme un champ, et le signe qui dit s'il faut le remplir.
Ce qu'il n'est pas. Ni un titre — il ne structure pas la page, il désigne une chose à remplir — ni le porteur de l'obligation : c'est le champ qui porte required, et c'est lui que les lecteurs d'écran annoncent. L'astérisque n'en est que la trace visible.

L'astérisque est redondant, et c'est voulu. Il est aria-hidden : sans quoi il serait annoncé deux fois, une fois en « étoile », une fois en « obligatoire ». En contrepartie, le formulaire qui s'en sert doit ouvrir sur la phrase « Les champs marqués * sont obligatoires ».
Son rouge est celui du système, et il ne l'a pas toujours pu : color/feedback/danger valait #D94A4A, soit 4,18:1 sur blanc, et ne tenait pas le seuil du texte de corps — on l'admettait parce que le signe est redondant. Le cran s'appelle maintenant color/feedback/danger/500 et vaut #DC2626, soit 4,82:1 : la dérogation n'a plus lieu d'être.

Text field

Ce qu'il est. Une ligne où quelqu'un tape du texte — un nom, une adresse, un sujet. Ce que le système ne peut pas proposer d'avance. Nœud Figma 23:29, six variantes.
Ce qu'il n'est pas. Ni Text Area, qui est la même chose sur plusieurs lignes et qui compte ses caractères ; ni Select, dont la liste est close ; ni un champ à suggestions — la liste qui s'ouvrirait dessous n'existe nulle part dans le système.

Le système a cru pendant tout un sprint qu'il n'avait pas de champ texte.Le sprint du 27/08 a relevé les neuf composants de formulaire de la plage 340–355 ; celui-ci est en 23, dessiné bien avant les autres, et il est resté invisible — ni dans les intégrés, ni dans la liste des non-intégrés. Sa description disait pourtant l'essentiel : il partage sa hauteur avec le bouton, pour que les deux se posent au même niveau côte à côte — 36 pxalors, 44 depuis que control/height la porte.

Son libellé vient de FieldLabel, comme celui de tous les autres champs. type ne prend que les types d'une seule ligne : un champ qui accepterait textarea ne serait plus celui-ci.

Le rembourrage du nœud valait 6 / 14, que rien ne liait. 14 n'existe dans le système que comme rayon, et 6 n'existe pas du tout. Le nœud a été redessiné à 12 / 16, les deux button/padding-*/sm — le geste déjà fait sur Text Area le 27/08. Les trois champs s'espacent maintenant pareil. Contre une hauteur fixe de 44, le rembourrage vertical ne pousse rien : il dit seulement d'où le texte part.

La variante Multiline n'est pas implémentée. Elle dessine ce que Text Area fait déjà, avec son propre nœud et son compteur. Deux composants pour une même chose se sépareraient au premier changement — c'est celui qui a le compteur qui reste.

Le nœud n'a ni état désactivé ni état d'erreur, et sa description dit pourquoi : en inventer un reviendrait à inventer des couleurs. disabled est pourtant écrit, parce que les six autres champs le portent et qu'il ne tient qu'à opacity/disabled, qui existe déjà. L'erreur, elle, ne l'est pas : elle demanderait une encre, un trait et un message qui n'existent nulle part. C'est la seule chose qui manque à ce champ pour être complet, et elle se dessine dans Figma.

Les trois champs se dessinent au même endroit. Police, encre, fond, trait, rayon, rembourrage, hauteur, survol, état éteint : tout est écrit une fois dans global.css, en recette de balise — à côté de celle du h2 et du p. Text field, Text Area et Select ne déclarent plus que leur place et ce qui leur est propre : le chevron pour l'un, le compteur pour l'autre. Ce qui change là a déjà changé pour les trois, comme FieldLabel le fait du libellé.

Les trois survols n'en font plus qu'un, et c'est celui-ci. Le trait fonce en neutral/500, le fond ne bouge pas. Text Area et Select grisaient le leur en neutral/100 — un cran qui ne se voit pas : #F3F2F5 et #F3F0FF ne diffèrent que par le canal bleu, 245 contre 255. Les deux nœuds ont été redessinés sur celui-ci.

La limite de la boîte ne se voit presque pas. Le trait border/default vaut 1,28:1 sur le fond du champ, et ce fond 1,12:1 sur le blanc de la page — WCAG 1.4.11 en demande 3 pour la limite d'un contrôle. C'est exactement l'écart réglé sur le Chip le 31/08, en rebranchant son trait sur accent/300 (3,2:1) sans toucher à border/default, que d'autres composants lisent. Le même geste est possible ici, sur les trois nœuds à la fois.

Select

Un champ qui fait choisir une valeur, ou plusieurs avec multiple, dans une liste. Nœud Figma 340:933.

Choix unique

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="u-simple"
  label="Pays"
  options={['France', 'Belgique', 'Suisse', 'Canada']}
  placeholder="Choisir un pays"
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="u-epingle"
  label="Pays"
  options={['France', 'Belgique', 'Suisse', 'Canada', 'Italie', 'Japon', 'Portugal', 'Espagne', 'Grèce', 'Maroc']}
  value="Canada"
  showSelected
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="u-recherche"
  label="Pays"
  options={['France', 'Belgique', 'Suisse', 'Canada', 'Italie', 'Japon', 'Portugal', 'Espagne', 'Grèce', 'Maroc']}
  placeholder="Choisir un pays"
  searchable
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="u-creation"
  label="Pays"
  options={['France', 'Belgique', 'Suisse', 'Canada']}
  placeholder="Choisir un pays"
  creatable
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="u-tout"
  label="Pays"
  options={['France', 'Belgique', 'Suisse', 'Canada', 'Italie', 'Japon', 'Portugal', 'Espagne', 'Grèce', 'Maroc']}
  value="Canada"
  searchable
  creatable
  showSelected
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="u-groupe"
  label="Destination"
  options={[
    { label: 'Europe', options: ['France', 'Belgique', 'Suisse', 'Italie', 'Portugal', 'Espagne', 'Grèce'] },
    { label: 'Amérique', options: ['Canada', 'Mexique', 'Brésil'] },
    { label: 'Asie', options: ['Japon', 'Vietnam'] },
    { label: 'Océanie', options: ['Australie', 'Nouvelle-Zélande'], disabled: true },
  ]}
  value="Japon"
  searchable
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="u-requis"
  label="Pays"
  options={['France', 'Belgique', 'Suisse', 'Canada']}
  placeholder="Choisir un pays"
  required
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="u-eteint"
  label="Pays"
  options={['France', 'Belgique', 'Suisse', 'Canada']}
  placeholder="Choisir un pays"
  disabled
/>

Choix multiple

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="m-simple"
  label="Destinations"
  options={['France', 'Belgique', 'Suisse', 'Canada', 'Italie', 'Japon', 'Portugal', 'Espagne', 'Grèce', 'Maroc']}
  multiple
  placeholder="Choisir des destinations"
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="m-epingle"
  label="Destinations"
  options={['France', 'Belgique', 'Suisse', 'Canada', 'Italie', 'Japon', 'Portugal', 'Espagne', 'Grèce', 'Maroc']}
  multiple
  values={['France', 'Japon']}
  showSelected
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="m-recherche"
  label="Destinations"
  options={['France', 'Belgique', 'Suisse', 'Canada', 'Italie', 'Japon', 'Portugal', 'Espagne', 'Grèce', 'Maroc']}
  multiple
  values={['Grèce']}
  searchable
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="m-creation"
  label="Destinations"
  options={['France', 'Belgique', 'Suisse', 'Canada', 'Italie', 'Japon', 'Portugal', 'Espagne', 'Grèce', 'Maroc']}
  multiple
  placeholder="Choisir des destinations"
  creatable
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="m-tout"
  label="Destinations"
  options={['France', 'Belgique', 'Suisse', 'Canada', 'Italie', 'Japon', 'Portugal', 'Espagne', 'Grèce', 'Maroc']}
  multiple
  values={['France', 'Japon']}
  searchable
  creatable
  showSelected
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="m-pastilles"
  label="Destinations"
  options={['France', 'Belgique', 'Suisse', 'Canada', 'Italie', 'Japon', 'Portugal', 'Espagne', 'Grèce', 'Maroc']}
  multiple
  values={['France', 'Japon']}
  max={3}
  display="chips"
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="m-groupe"
  label="Destinations"
  options={[
    { label: 'Europe', options: ['France', 'Belgique', 'Suisse', 'Italie', 'Portugal', 'Espagne', 'Grèce'] },
    { label: 'Amérique', options: ['Canada', 'Mexique', 'Brésil'] },
    { label: 'Asie', options: ['Japon', 'Vietnam'] },
    { label: 'Océanie', options: ['Australie', 'Nouvelle-Zélande'], disabled: true },
  ]}
  multiple
  values={['Japon']}
  searchable
/>

---
import Select from 'ux-design-system/components/Select.astro';
---

<Select
  id="m-eteint"
  label="Destinations"
  options={['France', 'Belgique', 'Suisse', 'Canada', 'Italie', 'Japon', 'Portugal', 'Espagne', 'Grèce', 'Maroc']}
  multiple
  values={['Belgique']}
  disabled
/>

Props

Radio

Ce qu'il est. Un choix parmi plusieurs, dont un seul peut être retenu. Nœud Figma 340:879, huit variantes — Selected × State.
Ce qu'il n'est pas. Ni une case à cocher — une case se coche et se décoche toute seule, un radio ne se relâche qu'en en choisissant un autre — ni un objet qui vit seul : il n'a de sens que dans un groupe qui partage un name et pose sa question en <legend>. Pour un oui/non isolé, c'est Checkbox.

Le contrôle est natif, le dessin est du système. appearance: none efface celui du navigateur, et tout ce qui le remplace est une variable. Le point du centre n'est pas un second élément : c'est une ombre intérieure de space/xs posée sur un fond blanc — 16 − 4 − 4 = 8, exactement le point du nœud, sans qu'une mesure soit écrite à la main. Le contrôle reste un <input type="radio"> : la navigation aux flèches dans le groupe et l'annonce aux lecteurs d'écran viennent avec.

Un groupe, tel qu'il s'écrit

Un radio ne se juge pas seul. Le <fieldset> et sa <legend> ne viennent pas du composant : c'est la page qui pose la question, le composant ne connaît que ses propres mots.

Les états, un par un

Hover fonce l'accent d'un cran — accent/600 au lieu de accent/500 — et ne s'attrape qu'à la souris. Focused pose l'anneau du système — button/focus-ring-width sur color/border/focus, en outline pour ne rien déplacer autour de lui. WCAG 2.4.7.

Pas de required, et c'est voulu. Un astérisque par option dirait que chaque choix est obligatoire. C'est le groupe qui l'est : l'obligation se pose sur le <fieldset>, dans la question, pas sur chacune de ses réponses.

Plus une seule mesure approchée. Le cercle fait control/size, son trait border/width/default, son anneau de focus border/width/focus. Et le point ne se mesure toujours pas : le trait prend 1 de chaque côté, la boîte intérieure retombe à 16, et l'anneau de space/xs n'y laisse que 16 − 4 − 4 = 8. Le désactivé, lui, ne bascule plus vers un gris — le cercle garde son dessin et s'atténue de opacity/disabled, ce que le nœud dessinait depuis le début.

Le libellé n'a pas la typographie du nœud. Figma le dessine à 14 px, interligne 120 %, et le grise en neutral/400 ; FieldLabel le rend à 15 px, interligne 112 %, grisé en muted. Le libellé partagé l'emporte : c'est sa raison d'être qu'un seul fichier décide de tous les libellés du formulaire. L'écart est à trancher dans Figma, pas ici.

Checkbox

Ce qu'elle est. Une case qui se coche et se décoche toute seule. Nœud Figma 340:842, huit variantes — Checked × State.
Ce qu'elle n'est pas. Ni un radio — un radio ne se relâche qu'en en choisissant un autre, et n'a de sens qu'en groupe — ni un interrupteur : un Toggle applique son effet à l'instant où on le bascule, une case attend l'envoi du formulaire.

La coche n'est pas dessinée en CSS. C'est l'icône check du registre, posée par-dessus la case et rendue insensible au clic — exactement comme Select pose son chevron sur sa boîte. Le dessin du système sert donc à deux endroits au lieu d'être refait ici.

Elle vit très bien seule, et c'est là que required a un sens : « j'accepte les conditions » est une case unique et obligatoire. Un radio, lui, n'a jamais d'astérisque — l'obligation y porte sur le groupe.

Une liste, telle qu'elle s'écrit

Les états, un par un

Hover fonce l'accent d'un cran — accent/600 au lieu de accent/500. Focused pose l'anneau du système — button/focus-ring-width sur color/border/focus, en outline pour ne rien déplacer autour de lui. WCAG 2.4.7.

Plus une seule mesure approchée. La boîte fait control/size, son rayon radius/sm, son trait border/width/default. Le trait est posé cochée comme décochée, et c'est sa couleur qui change : le nœud ne le dessine que sur la case vide, mais un trait accent sur un fond accent se voit pareil — et la boîte garde alors la même taille dans les deux états, ce qui compte davantage.

L'épaisseur du tracé de la coche est celle de l'icône du registre, pas les 2 du nœud. C'est voulu : le même dessin sert partout ailleurs dans le système, et il ne se redessine pas pour une case.

Le libellé n'a pas la typographie du nœud — 14 px / 120 % et neutral/400 dans Figma, 15 px / 112 % et muted dans FieldLabel. Même écart que pour Radio, même arbitrage : le libellé partagé l'emporte, et l'écart se tranche dans Figma.

Toggle

Ce qu'il est. Un interrupteur : deux positions, et l'effet suit la bascule. Nœud Figma 340:912, huit variantes — Value × State.
Ce qu'il n'est pas. Ni une case à cocher — une case enregistre une intention que l'envoi du formulaire ira chercher, un interrupteur agit tout de suite, et c'est pourquoi il ne s'accompagne jamais d'un bouton « Valider » — ni un bouton : un bouton fait une chose et retombe, un interrupteur tient un état qu'on peut relire sur lui.

La piste tombe juste, et c'est la bonne surprise du sprint. Ses 40 de large sont space-xl + space-lg — 24 + 16, exactement. La pastille est space/lg, soit 16 pile. Son retrait dans la piste est space/xs, soit (24 − 16) / 2 = 4. Et sa course est space/lg : 40 − 16 − 4 − 4 = 16. Quatre mesures, quatre tokens, aucun chiffre écrit à la main.

Les états, un par un

Le libellé nomme un état, pas une action. « Notifications par courriel », pas « Activer les notifications » : l'interrupteur dit déjà qu'on active, et un libellé qui le répète devient faux dès qu'on l'éteint. C'est aussi la raison de role="switch" — il fait annoncer « activé / désactivé » plutôt que « coché / décoché », ce qui est la bonne phrase pour un objet qui agit à l'instant où on le bascule.

Deux mesures nommées, et tout le reste se déduit. La piste prend control/track-height et la pastille space/lg ; son retrait (22 − 16) / 2 = 3 et sa course 40 − 16 − 3 − 3 = 18 ne sont pas écrits mais calculés. Si l'une des deux bouge dans Figma, les deux autres suivent toutes seules. L'écart au libellé, lui, est passé à 8 dans le nœud : les trois contrôles compacts s'espacent enfin pareil.

Le libellé n'a pas la typographie du nœud — 14 px / 120 % et neutral/400 dans Figma, 15 px / 112 % et muted dans FieldLabel. Même écart que pour Radio et Checkbox, même arbitrage.

Text Area

Ce qu'elle est. Un champ pour du texte qui court sur plusieurs lignes. Nœud Figma 343:273, quatre états plus Show Count.
Ce qu'elle n'est pas. Ni un champ texte — un champ texte tient sur une ligne et se remplit d'un nom, d'un courriel, d'un nombre, quelque chose dont on connaît la forme ; une zone de texte attend une phrase dont on ne connaît que la longueur maximale, et c'est pourquoi elle est la seule à compter ses caractères — ni un éditeur : rien ici ne met en gras, n'insère de lien ni ne garde de mise en forme.

La hauteur se dit en lignes, pas en pixels. rows compte des lignes : la boîte se mesure alors sur sa propre typographie et grandit avec elle, alors qu'une hauteur en pixels se décrocherait au premier changement de corps. Les 120 px du nœud n'ont de toute façon pas de variable.

Les états, un par un

Avec son compteur

Le compteur n'a de sens qu'avec une limite : « 12 caractères » ne dit rien, « 12 / 500 » dit combien il en reste. showCount sans maxlength n'affiche donc rien.

C'est le seul script du dépôt, et il se justifie par un échec mesurable. Sans lui, le compteur afficherait « 0 / 500 » alors que la boîte en contient quarante : il ne serait pas dégradé, il serait faux. Ce qu'il enrichit reste facultatif — la limite est tenue par maxlength, côté navigateur, et le champ fonctionne entièrement sans lui. Le compteur n'est pas une région vivante : annoncer un nouveau total à chaque frappe couvrirait la dictée du texte lui-même. C'est maxlength que les lecteurs d'écran annoncent, une fois, à l'entrée dans le champ.

L'écart au libellé est tranché, et il vaut 5. Les deux nœuds le disaient déjà — control/field-gap le nomme, et Text Area et Select s'espacent donc pareil. Le rembourrage aussi : le nœud a été redessiné sur les 12 / 16 du bouton, que le code écrivait déjà. La boîte porte enfin son trait, et le champ désactivé s'atténue au lieu de compter sur l'encre de son libellé.

Son survol a changé, et il ne lui appartient plus. Le nœud grisait son fond en neutral/100 ; les trois champs foncent maintenant leur trait en neutral/500, le geste que seul le nœud du champ texte dessinait. 343:273 a été redessiné dessus, et son dessin vient désormais de la recette que les trois partagent.

La casse TITLE du libellé n'est pas appliquée. Elle capitaliserait chaque mot du texte que l'appelant donne — ce qui est faux dès qu'un libellé porte un nom propre, une abréviation ou un mot que le français ne capitalise pas.

Le libellé ne pâlit pas au survol ni au focus. Figma le passe en muted dans ces deux états ; FieldLabel n'en a que deux, et un libellé qui pâlit quand on entre dans son champ est un arbitrage de dessin, pas une mécanique. Il se tranche dans Figma. Même remarque pour sa typographie — 14 px / 155 % contre 15 px / 112 %.

Chip

Ce qu'il est. Une pastille qu'on retient ou qu'on relâche. Nœud Figma 351:273, huit variantes — Selected × State.
Ce qu'il n'est pas. Ni une étiquette — une étiquette affiche une catégorie, on ne la touche pas — ni un bouton : un bouton déclenche et retombe, un chip reste enfoncé.

C'est une case à cocher, et c'est ce qui lui permet de fonctionner sans une ligne de JavaScript : cliquer le chip le retient, la barre d'espace aussi, et le formulaire l'envoie. La case est déportée hors du cadre plutôt que masquée — display: none la retirerait du parcours au clavier et de l'arbre d'accessibilité, ce qui reviendrait à supprimer le contrôle pour n'en garder que le dessin.

C'est le premier composant du sprint qui arrive presque entièrement tokenisé. Rembourrage space/sm et space/lg, rayon radius/pill, les quatre fonds, toute la typographie : Figma les lie tous à des variables. Rien de sa forme n'est décidé dans le code.

Une rangée de filtres

Les états, un par un

Le chip a retrouvé son trait, et il se voit. C'était l'écart le plus coûteux du sprint : son fond est bg/default, le blanc de la page, et sans bordure un chip non retenu était littéralement invisible. border/width/default sur color/accent/300 le détache.

Le trait valait color/border/default, à 1,28:1 sur le blanc — sous les 3:1 que WCAG 1.4.11 demande à la limite visible d'un contrôle. Aucune couleur de trait nommée du système n'y arrivait — border/strong vaut 1,29:1, et neutral/500 2,41:1 — donc le nœud est redessiné sur accent/300, la première couleur de la rampe à dépasser le seuil, à 3,2:1. Seuls les états non sélectionnés en dépendaient (Default, Hover, Disabled) ; Focused et les états sélectionnés sont inchangés. color/border/default lui-même n'a pas bougé — ce qui le lit ailleurs voit toujours 1,28:1.

La graisse porte l'état, pas seulement la couleur. Un chip retenu passe son mot en medium — il se reconnaît donc aussi en niveaux de gris, ce que WCAG 1.4.1 demande : la couleur ne doit jamais être le seul indice.

L'anneau de focus est porté par le chip, pas par la case — celle-ci étant hors du cadre, son propre anneau ne se verrait pas. Il mesure border/width/focus, comme partout ailleurs. WCAG 2.4.7.

Figma ne distingue pas le choix multiple du choix unique. Celui-ci est une case : plusieurs chips peuvent être retenus en même temps. Un groupe à choix unique demanderait des radios, donc une variante que le nœud ne porte pas — elle se décide dans Figma avant de s'écrire ici.

Add Image

Ce qu'elle est. Le cycle complet d'un dépôt d'image : le champ qui l'accepte, sa progression, son échec, et l'image qu'il finit par tenir. Nœuds Figma 343:315 (les quatre états d'interaction du champ) et 418:1020 (les quatre étapes du cycle).
Ce qu'elle n'est pas. Un bouton — un bouton déclenche une action, l'état add ouvre le sélecteur de fichiers du système et rend un fichier au formulaire. Ce n'est plus vrai qu'elle ne montre jamais ce qui a été déposé : l'état success montre l'image, avec de quoi la revoir ou la retirer — exactement ce que fait EditImageGallery, mais pour une image dans son emplacement plutôt que pour la liste de celles déjà validées.

C'est un <input type="file"> et son <label>, et c'est ce qui lui permet de fonctionner sans une ligne de JavaScript : cliquer la zone ouvre le sélecteur, Entrée et la barre d'espace aussi. L'indication est liée au champ par aria-describedby — elle est lue après le libellé, à l'entrée dans le contrôle, et non comme un texte flottant que rien ne rattache.

Les états, un par un

default

Add imagePNG, JPG up to 10 MB

sans indication

Add image

multiple

Add imagePNG, JPG up to 10 MB

disabled

Add imagePNG, JPG up to 10 MB

in-progress

téléchargement

62%

fail

le téléchargement a échouéRecommencer

success

voirsupprimer

Hover passe le fond en accent/100 et le libellé en accent/600. L'icône n'a rien à déclarer : en currentColor, elle suit le libellé — c'est la règle du dépôt, et c'est ce qui évite un second fichier SVG.

Deux mesures tombent juste par composition. Le rembourrage vertical de 28 est space-xl + space-xs, et l'icône de 32 est space/2xl — aucune des deux n'est approchée, elles sont exactes. L'horizontal, lui, est space/xl, lié dans le nœud.

La zone ne fait pas 240 × 140. Aucune variable ne porte ces deux mesures, et c'est sans doute aussi bien : la zone se dimensionne sur son contenu et prend la largeur que l'appelant lui donne, ce qu'il faut de toute façon pour une mise en page qui s'adapte.

Le trait de la zone est passé de 1,5 à 1. Cette épaisseur-là n'existait que sur deux objets du fichier — celui-ci et Add Folder, qui sont la même zone de dépôt — quand 1 est dessiné 217 fois ailleurs. Un seul cran valait mieux que deux, et les deux nœuds ont été redessinés.

La couleur de l'icône vient d'une autre bibliothèque dans Figma. Le nœud la lie à une variable étrangère à ce système. Ici l'icône est en currentColor et prend donc l'encre du libellé — c'est la règle du dépôt, et c'est ce qui la fait virer à l'accent au survol sans qu'une seconde couleur soit écrite.

Le glisser-déposer n'est pas implémenté. Il demanderait un script, et son absence n'est pas un échec : le clic et le clavier ouvrent tous deux le sélecteur.

Démo interactive

Choisir un fichier fait vivre le cycle pour de vrai : le champ passe à in-progress, puis à fail ou success en alternance — une règle de démo assumée, il n'y a pas de vrai serveur derrière cette page. Le script qui l'anime vit ici, sur /formulaire, jamais dans le composant : sans lui le champ reste un AddImage state="add" ordinaire, entièrement fonctionnel.

Add imagePNG, JPG up to 10 MB

Edit Image Gallery

Ce qu'elle est. Les images déjà déposées, chacune avec de quoi la revoir ou la retirer. Nœud Figma 355:1396.
Ce qu'elle n'est pas. Ni AddImage — qui couvre le cycle d'un seul emplacement, du champ vide jusqu'à l'image tenue — ni un carrousel : un carrousel fait défiler pour montrer, celle-ci étale pour laisser modifier. Et ce n'est pas une galerie de consultation : chaque vignette porte deux actions, donc elle appartient à un formulaire.

Les deux boutons sont le Button du système, en md — « voir » en secondary, « supprimer » en alert, la seule variante d'action destructive. Ils ne sont pas redessinés ici : une vignette qui aurait ses propres boutons cesserait de suivre le système au premier changement de bouton.

« supprimer » est un submit qui porte son name et sa value : le formulaire sait donc laquelle retirer sans une ligne de JavaScript. Son nom accessible dit de quelle image il s'agit — quatre boutons « supprimer » à la suite ne se distinguent pas autrement au lecteur d'écran (WCAG 2.4.6).

Deux mesures tombent juste par composition. La hauteur d'une vignette est space-layout-128 + space-md — 140 exactement, la mesure du nœud. Son rembourrage vertical est space-xl + space-xs, soit 28. L'écart des vignettes et le rembourrage de la grille sont space/sm, liés dans le nœud.

La largeur d'une vignette est 192, pas 189. space-layout-128 + space-layout-64 est la composition la plus proche —écart +3. Et c'est un minimum : la grille étire les vignettes pour remplir la ligne, ce qui est de toute façon ce qu'il faut ici. La largeur maximale de 337 du nœud, elle, n'a aucune variable et n'est pas écrite.

Le voile noir à 20 % n'est pas posé. Le système n'a pas d'échelle d'opacité. Il n'était là que pour détacher les boutons de la photo, et les boutons secondary ont leur propre fond opaque : le contraste tient sans lui — WCAG 1.4.3 est porté par le bouton, pas par le voile.

La vignette ne porte aucun trait, et le nœud non plus. Ce composant en a annoncé un de 1,5 jusqu'à ce qu'une relecture du nœud ne le trouve nulle part. Ce qui y est, c'est le voile à 20 %, posé sur le remplissage de l'image. La vignette, elle, n'a pas de bord à dessiner : l'image l'occupe entièrement.