Composants › Inputs & Formulaires

Inputs & Formulaires

Champs de saisie, états de validation, sélecteurs et exemples de formulaires complets. Tous les composants sont interactifs avec focus et transitions natifs.

1Input standard — tous les états

Le champ de saisie principal existe en 6 états visuels distincts. Cliquez sur les champs pour voir les états focus en direct.

Default
Fond #EEEEEE, border transparent
Focus
Border teal + glow 3px
Filled
Fond blanc, texte saisi
Error
Email invalide — vérifiez le format
Success
Email valide
Disabled
opacity 0.5 · cursor not-allowed

Focus ring

box-shadow: 0 0 0 3px rgba(2,132,144,0.15)

Error ring

box-shadow: 0 0 0 3px rgba(220,38,38,0.12)

Success ring

box-shadow: 0 0 0 3px rgba(34,197,94,0.12)

2Types de champs

Tous les types de champs utilisés dans l'app et sur la landing page. Chaque champ est fonctionnel et interactif.

resize: vertical — min-height: 96px
Label se lève au focus et à la saisie (CSS :focus + :not(:placeholder-shown))

Tokens communs

App mobile

Background#EEEEEE
Bordertransparent
Height56px
Radius8px
FontInter 16px
Padding12px 16px

Landing page

Background#ffffff
Border1px #E0E5E6
Height48px
Radius8px
FontInter 16px
Padding12px 16px

Placeholder

Color#637887
LabelInter 600 14px
Label color#073742
Transition0.2s ease

3Formulaire Connexion — App mobile

Reproduction fidèle de l'écran de connexion de l'application Swellr dans un mockup téléphone 280px.

S
Swellr
Connecte toi,
Et surf avec tes amis ! 🏄
ou

Pas encore de compte ? Inscris-toi ici

Spécifications — Écran Connexion

Structure

Largeur mockup280px
Fond#08272e
Border-radius40px (ext) / 28px (écran)

Typographie

TitreManrope 800 / 18px
LabelInter 600 / 12px
InputInter 400 / 14px
BoutonInter 600 / 15px

Input app (dark)

Backgroundrgba(255,255,255, 0.08)
Border1.5px rgba(255,255,255,0.1)
Border focus#028490
Height44px
Radius8px

Composants

Bouton principalheight 46px, radius 9999px
Séparateur1px rgba(255,255,255,0.1)
Social Googlebg #ffffff, h:44px, radius full
Social Applebg #090909, h:44px, radius full
Linkcolor #028490 / 12px

4Formulaire Inscription — App mobile

Écran d'inscription avec 4 champs de saisie, bouton principal et liens sociaux.

S
Swellr
Inscris-toi
Et surf avec tes amis ! 🏖️

Déjà un compte ? Connecte-toi ici

ou

Différences Connexion vs Inscription

Propriété Connexion Inscription
Emoji titre 🏄 🏖️
Nb. de champs 2 (email + mdp) 4 (prénom, nom, email, mdp)
Grille champs 1 colonne 2 cols (prénom/nom)
Bouton primary Se connecter S'inscrire
Bouton ghost Mot de passe oublié ? —
Link bas Pas encore de compte ? Déjà un compte ?
Ordre séparateur Après bouton ghost Après link
Boutons sociaux Google + Apple Google + Apple
Pattern auth : Les deux écrans utilisent le même système de boutons sociaux (Google blanc + Apple noir) pour offrir 3 méthodes d'authentification : email/mdp, Google OAuth, Sign in with Apple.

5Checkboxes, Radios & Toggle

Composants de sélection stylisés via CSS pur. Tous les états sont présentés (défaut, sélectionné, erreur, désactivé).

Checkbox

Radio button

Toggle / Switch

Notifications push
Off — #d1d5db
Partage de localisation
On — #028490
Mode hors-ligne
Désactivé
Track width48px
Track height26px
Thumb size20×20px
Off color#d1d5db
On color#028490
Transition0.2s ease

6Messages de validation

Retours visuels pour guider l'utilisateur : succès, erreur, information et avertissement.

✓
Compte créé avec succès !
Bienvenue sur Swellr. Vous pouvez maintenant accéder à votre espace.
✕
Identifiants incorrects
L'email ou le mot de passe est invalide. Vérifiez vos informations et réessayez.
i
Vérifiez votre email
Un lien de confirmation a été envoyé à votre@email.com. Pensez à vérifier vos spams.
⚠
Session expirée
Votre session a expiré après 30 minutes d'inactivité. Reconnectez-vous pour continuer.

Messages inline — sous les champs

Email valide et disponible
Minimum 8 caractères requis
Ce pseudo sera visible par la communauté
Type Background Couleur texte Icône Usage
Succès rgba(34,197,94, 0.10) #16a34a ✓ (check) Action réussie, validation ok
Erreur rgba(220,38,38, 0.08) #dc2626 ✕ (cross) Validation échouée, erreur serveur
Info rgba(45,105,201, 0.08) #2D69C9 i (info) Aide contextuelle, information
Warning rgba(245,158,11, 0.10) #d97706 ⚠ (triangle) Attention, session expirée, quota