Input

Saisie de données avec label obligatoire, 7 types, icônes hybrides et gestion d'erreur accessible. Le label est non négociable — un input sans label est inaccessible (WCAG 1.3.1). Data entry with required label, 7 types, hybrid icons, and accessible error handling. The label is non-negotiable — an input without a label is inaccessible (WCAG 1.3.1).

ÉtatsStates

DéfautDefault

Nom completFull name Tel qu'il apparaît sur votre document officiel.As it appears on your official document.

ErreurError

Adresse e-mailEmail address Format d'adresse invalide.Invalid email format.

DésactivéDisabled

Code d'accèsAccess code

Règles absoluesAbsolute rules

Toujours fournir label="…" — jamais placeholder seul (WCAG 1.3.1)Always provide label="…" — never placeholder alone (WCAG 1.3.1)
Utiliser invalid + error-message ensemble — l'erreur doit être expliquéeUse invalid + error-message together — the error must be explained
Le focus visible est sur le wrapper .control — clavier et pointeur couvertsVisible focus is on the .control wrapper — keyboard and pointer covered
Jamais d'input sans label — avertissement console + violation WCAG 1.3.1Never an input without label — console warning + WCAG 1.3.1 violation
Jamais de valeur ou espacement codé en durNever hardcoded values or spacing

Tokens de composantComponent tokens

Token CSS	Référence sémantiqueSemantic reference	Valeur résolueResolved value
`--agtc-component-input-default-background`	`semantic.color.background.surface`	#ffffff
`--agtc-component-input-default-border`	`semantic.color.border.default`	#e8e8e8
`--agtc-component-input-default-border-focus`	`semantic.color.border.focus`	#007a68
`--agtc-component-input-default-border-error`	`semantic.color.border.danger`	#ce2c31
`--agtc-component-input-default-text`	`semantic.color.text.primary`	#202020
`--agtc-component-input-default-placeholder`	`semantic.color.text.secondary`	#646464
`--agtc-component-input-default-radius`	`semantic.radius.control`	6px
`--agtc-component-input-default-padding-x`	`semantic.space.control.padding-x`	16px
`--agtc-component-input-default-padding-y`	`semantic.space.control.padding-y`	8px

Types supportésSupported types

Type	UsageUsage	ParticularitéNote
`text`	Saisie libreFree text	DéfautDefault
`email`	Adresse e-mailEmail address	Validation nativeNative validation
`password`	Mot de passePassword	Toggle show/hide intégréBuilt-in show/hide toggle
`number`	Valeur numériqueNumeric value	Spinners supprimésSpinners removed
`search`	RechercheSearch	—
`tel`	TéléphonePhone	—
`url`	URL	Validation nativeNative validation

AccessibilitéAccessibility

label lié via for/id — jamais aria-label seul sur l'inputlabel linked via for/id — never aria-label alone on input
aria-invalid="true" + role="alert" sur l'error-messagearia-invalid="true" + role="alert" on error-message
aria-describedby lie helper-text et error-message à l'inputaria-describedby links helper-text and error-message to the input
Type password : aria-label du toggle change dynamiquementpassword type: toggle aria-label changes dynamically
Champ requis : aria-required="true" + marqueur * visuelRequired field: aria-required="true" + visual * marker

ImplémentationImplementation

<!-- Basique -->
<agtc-input label="Nom completFull name" name="fullname"></agtc-input>

<!-- Avec aide et erreur -->
<agtc-input
  label="Adresse e-mailEmail address"
  type="email"
  helper-text="Utilisée pour les notificationsUsed for notifications"
  invalid
  error-message="Format invalideInvalid format"
></agtc-input>

<!-- Mot de passe avec toggle intégré -->
<agtc-input label="Mot de passePassword" type="password" required></agtc-input>

<!-- Avec icône -->
<agtc-input label="RechercherSearch" type="search" icon="search"></agtc-input>

DOs et DON'TsDOs and DON'Ts

À faireDo

Toujours fournir label avec un texte descriptifAlways provide label with descriptive text
Utiliser helper-text pour les contraintes de formatUse helper-text for format constraints
Paire invalid + error-message — jamais l'un sans l'autrePair invalid + error-message — never one without the other
Utiliser required pour les champs obligatoiresUse required for mandatory fields

À éviterDon't

Input sans label — inaccessibleInput without label — inaccessible
Placeholder comme seule étiquette — disparaît à la saisiePlaceholder as sole label — disappears on input
invalid sans error-message — erreur sans explicationinvalid without error-message — error without explanation
Styles inline sur le champInline styles on the field

UX Patterns Reference

Patterns approved by the Design System Lead via the ux-pattern-review workflow (see .claude/rules/ux-patterns-sources.md and ADR-036). Decision: all approved.

Pattern	Source	Applied	Justification
Visible label always present (never placeholder alone)	NN/g	✅	WCAG 1.3.1 — `label` required
Validation on blur (`onBlur`) by default	NN/g — Forms · IxDF	✅	Don't flag an error during the initial keystrokes
Re-validation on keystroke once a field is in error	NN/g — How to Report Errors in Forms	✅	Reward the correction immediately
Inline error under the field + `role="alert"`	NN/g — Error-Message Guidelines	✅	Localized error, announced to AT
Constructive error message (states what to fix)	NN/g — Error-Message Guidelines	✅	`error-message` writing rule
Persistent help text, distinct from the error, `aria-describedby`	NN/g	✅	`helper-text` linked via `aria-describedby`
Required marker `*` + `aria-required`	NN/g — Forms	✅	Required field flagged visually and to AT
Forgiving format (tolerate spaces/formats: `tel`, `number`)	IxDF — forgiving formats	✅	Reduces input errors
Avoid hostile patterns (no aggressive blocking, no clearing an errored field)	NN/g — Hostile Patterns in Error Messages	✅	Anti-dark-pattern

Validation contract (synthesis of patterns 2 + 3): validate on onBlur, then re-validate on every keystroke while the field is in an error state. Never validate on the first keystroke.