Inputs animes : floating labels et validation visuelle

Introduction

Les formulaires sont au coeur de l'experience utilisateur sur le web. Un formulaire bien concu avec des animations fluides et une validation visuelle claire peut transformer une tache fastidieuse en une interaction agreable.

Dans ce tutoriel, nous allons explorer 5 techniques essentielles pour creer des inputs modernes : floating labels, bordures animees, validation visuelle, checkboxes/radios custom et toggle switches. Chaque exemple est interactif et le code est pret a etre copie.

💡

Bon a savoir

Toutes ces techniques utilisent principalement CSS avec le selecteur :focus et le pseudo-selecteur :placeholder-shown. Le JavaScript n'est necessaire que pour la validation dynamique.

1. Floating Label Animation

Le floating label est devenu un standard du design moderne. Le label "flotte" au-dessus de l'input lorsque l'utilisateur commence a saisir, offrant un gain de place tout en gardant le contexte visible.

Adresse email

                                    
floating-label.html

<!-- HTML -->
<div class="floating-input-group">
  <input type="text" class="floating-input" placeholder=" " id="email">
  <label class="floating-label" for="email">Adresse email</label>
</div>

                                    
                                    
                                    
                                
floating-label.css

.floating-input-group {
  position: relative;
  width: 300px;
}

.floating-input {
  width: 100%;
  padding: 20px 16px 8px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: white;
  outline: none;
  transition: all 0.3s ease;
}

.floating-input:focus {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.05);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.floating-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #a1a1aa;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Animation au focus ou si rempli */
.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
  top: 8px;
  transform: translateY(0);
  font-size: 0.75rem;
  color: #6366f1;
}
                        

Comment ca fonctionne

La magie repose sur deux selecteurs CSS :

:focus : detecte quand l'input est actif
:not(:placeholder-shown) : detecte quand l'input contient du texte (le placeholder n'est plus visible)

Le placeholder=" " (espace) est crucial : il permet au selecteur :placeholder-shown de fonctionner sans afficher de texte visible.

2. Input avec Border Animee

Cette technique utilise une ligne animee qui s'etend du centre vers les bords lorsque l'input recoit le focus. C'est un effet elegant inspire du Material Design.

Nom complet

                                    
                                    
                                    
                                
border-animated.css

.border-input-group {
  position: relative;
  width: 300px;
}

.border-input {
  width: 100%;
  padding: 16px;
  font-size: 1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  color: white;
  outline: none;
}

/* Ligne animee */
.border-input-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  transition: all 0.4s ease;
}

.border-input:focus ~ .border-input-line {
  left: 0;
  width: 100%;
}

/* Label anime */
.border-input-label {
  position: absolute;
  left: 0;
  top: 16px;
  color: #a1a1aa;
  pointer-events: none;
  transition: all 0.3s ease;
}

.border-input:focus ~ .border-input-label,
.border-input:not(:placeholder-shown) ~ .border-input-label {
  top: -12px;
  font-size: 0.8rem;
  color: #6366f1;
}
                        

3. Validation Visuelle (Success/Error)

La validation visuelle donne un feedback immediat a l'utilisateur. Nous allons creer un input qui affiche des etats de succes et d'erreur avec des animations subtiles.

Email valide Email invalide

                                    
                                    
                                    
                                
validation-input.css

.validation-input {
  width: 100%;
  padding: 16px 48px 16px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: white;
  transition: all 0.3s ease;
}

/* Etat succes */
.validation-input.success {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}

/* Etat erreur avec shake */
.validation-input.error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* Icones de validation */
.validation-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.validation-input.success ~ .success-icon {
  transform: translateY(-50%) scale(1);
  background: #10b981;
}

.validation-input.error ~ .error-icon {
  transform: translateY(-50%) scale(1);
  background: #ef4444;
}
                        

4. Checkbox et Radio Custom Animes

Les checkboxes et radios natifs sont difficiles a styliser. Voici comment creer des versions custom avec des animations satisfaisantes.

Option activee Option desactivee

Choix A Choix B

                                    
                                    
                                    
                                
custom-checkbox.css

/* Custom Checkbox */
.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: #a1a1aa;
  transition: color 0.2s;
}

.custom-checkbox:hover {
  color: white;
}

/* Cacher l'input natif */
.custom-checkbox input {
  display: none;
}

.checkbox-box {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Coche en CSS */
.checkbox-box::after {
  content: '';
  width: 6px;
  height: 12px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) scale(0);
  margin-bottom: 3px;
  transition: transform 0.2s ease;
}

/* Etat coche */
.custom-checkbox input:checked ~ .checkbox-box {
  background: #6366f1;
  border-color: #6366f1;
  animation: checkPop 0.3s ease;
}

.custom-checkbox input:checked ~ .checkbox-box::after {
  transform: rotate(45deg) scale(1);
}

@keyframes checkPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
                        

                                    
                                    
                                    
                                
custom-radio.css

/* Custom Radio */
.custom-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.custom-radio input {
  display: none;
}

.radio-circle {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.radio-circle::after {
  content: '';
  width: 12px;
  height: 12px;
  background: #6366f1;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.custom-radio input:checked ~ .radio-circle {
  border-color: #6366f1;
}

.custom-radio input:checked ~ .radio-circle::after {
  transform: scale(1);
  animation: radioPop 0.3s ease;
}

@keyframes radioPop {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
                        

5. Toggle Switch Moderne

Le toggle switch est ideal pour les parametres on/off. Voici une version moderne avec une animation fluide utilisant un cubic-bezier pour un effet de rebond.

Mode sombre active

Notifications desactivees

                                    
                                    
                                    
                                
toggle-switch.css

.toggle-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.toggle-switch input {
  display: none;
}

.toggle-track {
  width: 56px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  position: relative;
  transition: background 0.3s ease;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  /* Effet de rebond */
  transition: left 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Etat active */
.toggle-switch input:checked ~ .toggle-track {
  background: #6366f1;
}

.toggle-switch input:checked ~ .toggle-track .toggle-thumb {
  left: 29px;
}
                        

Bonnes Pratiques et Accessibilite

Creer des inputs beaux ne suffit pas : ils doivent aussi etre accessibles et performants.

Accessibilite

Toujours associer label et input avec for et id
Ne jamais cacher l'input avec display: none sans alternative (utilisez opacity: 0 avec position: absolute pour garder la navigation clavier)
Contrast suffisant : les couleurs de validation doivent etre visibles
Focus visible : gardez toujours un indicateur de focus clair

                                    
                                    
                                    
                                
accessibility.css

/* Respect des preferences utilisateur */
@media (prefers-reduced-motion: reduce) {
  .floating-input,
  .floating-label,
  .border-input-line,
  .checkbox-box,
  .toggle-thumb {
    transition: none;
  }

  .validation-input.error {
    animation: none;
  }
}

/* Focus visible pour navigation clavier */
.custom-checkbox input:focus-visible ~ .checkbox-box,
.custom-radio input:focus-visible ~ .radio-circle,
.toggle-switch input:focus-visible ~ .toggle-track {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
                        

Performance

Preferez transform a top/left pour les animations
Utilisez will-change avec parcimonie sur les elements animes
Evitez les box-shadow complexes sur de nombreux elements

⚠️

Important

Pour les checkboxes et radios custom, la meilleure pratique est d'utiliser position: absolute et opacity: 0 plutot que display: none pour conserver l'accessibilite clavier.

Conclusion

Les inputs animes transforment l'experience utilisateur de vos formulaires. Avec ces 5 techniques, vous avez tout ce qu'il faut pour creer des interfaces modernes et engageantes.

N'oubliez pas que l'animation doit servir l'UX, pas la desservir. Gardez vos effets subtils, performants et accessibles. Vos utilisateurs vous remercieront !

🎨

Allez plus loin

Retrouvez des dizaines de composants de formulaire prets a l'emploi dans notre bibliotheque d'effets, avec code copiable en un clic.

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Inputs animes : floating labels et validation visuelle

Introduction

1. Floating Label Animation

Comment ca fonctionne

2. Input avec Border Animee

3. Validation Visuelle (Success/Error)

4. Checkbox et Radio Custom Animes

5. Toggle Switch Moderne

Bonnes Pratiques et Accessibilite

Accessibilite

Performance

Conclusion

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Introduction

1. Floating Label Animation

Comment ca fonctionne

2. Input avec Border Animee

3. Validation Visuelle (Success/Error)

4. Checkbox et Radio Custom Animes

5. Toggle Switch Moderne

Bonnes Pratiques et Accessibilite

Accessibilite

Performance

Conclusion

Articles similaires

Creer un bouton glow avec CSS pur

Scroll-driven animations : le guide complet

Micro-interactions qui font la difference

Recevez nos tutoriels