Input

TextField

A 52px outlined field and a 56px pill search bar.

Live preview

Reference specimen. Example copy comes from the Pelote specs and is in French.

ExpressiveRéférence

DomaineLe DNS doit pointer vers ce serveur.

Glycémiemg/dLValeur entre 20 et 600 mg/dL.

UX / UIRègles illustrées

À faire

Port

Libellé au-dessus, toujours visible.

À éviter

Libellé en placeholder : il disparaît dès qu'on tape.

À faire

Entre un nombre, par exemple 8080.

L'erreur dit comment corriger.

À éviter

Erreur 422

Un code technique sans issue.

Variante M3EMême composant, mêmes rôles, autre matière

PlazaWii U / 3DS

Champ en creux (ombre interne), halo primary au focus.

ChromeY2K

Champ gravé, halo primary lumineux au focus.

Reference specimen. Example copy comes from the Pelote specs and is in French.

A 52px outlined field (12px radius) with a label above, and a 56px pill search bar.

The outline goes from outline to primary 2px on focus, to error on error.
The error appears under the field and says how to fix it.
The placeholder is an example, never the label. Search: field search, an schh pill without an outline.