Design system

Components

DFormField.

Label is an overline (10px / 0.8px tracking / 700). Input is 14px Inter on a hairline border, focus ring is olive-100. Error binds the border + help text to --color-rose-500.

Help, value, and error

with-help

Label + help text sous l'input. Help reste neutre, olive-50 quand focus

Aucun débit avant confirmation

filled

Champ rempli avec help. État de repos canonique

2 à 24 convives

no-help

Label seul. Aucun help, aucun error. La forme minimale du champ

error

Erreur : border + texte help repassent en rose-500. Help est remplacé par error

Email incomplet

With optionalLabel

optional-label

Suffixe inline non-uppercase à côté du label principal. Pour les hints soft : « 14 chiffres », « optionnelle »

Auto-entreprise ou micro-entreprise.

JPG, PNG ou WebP, 5 Mo max.