Pelote
EN
Saisie

TextField

Champ outlined de 52px et barre de recherche pilule de 56px.

Catégorie: SaisieOuvrir l'aperçu seul

Aperçu en direct

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

ExpressiveRéférence

DomaineLe DNS doit pointer vers ce serveur.
GlycémieValeur 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.

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

Champ outlined de 52px (rayon 12) avec libellé au-dessus, et barre de recherche pilule de 56px.

Ce que fournit le consommateur

Un libellé visible, un id, le message d'aide ou d'erreur, inputmode adapté.

Règles

  • Le contour passe de outline à primary 2px au focus, à error en erreur.
  • L'erreur s'affiche sous le champ et dit comment corriger.
  • Placeholder = exemple, jamais le libellé.
  • Recherche : field search, pilule schh sans contour.

Plus

TokensAssetsLicence GitHub

Apparence

Le choix s'applique tout de suite et reste sur cet appareil.

Mode
Couleur du thème Tous les rôles sont régénérés depuis cette couleur source.
Style La matière change, les composants et les rôles restent les mêmes.
Material YouSur le web, la couleur du fond d'écran n'est pas accessible. Choisis une couleur source ci-dessus ; dans les apps Android 12+, Material You suit le fond d'écran.