Feature/floating labels#11
Conversation
This commit introduces a new UI example demonstrating the importance of visible labels over relying solely on placeholders in form inputs. It includes both a bad example (placeholder as label) and a good example (explicit label with password visibility toggle). - Adds new components (`BadExample.tsx`, `GoodExample.tsx`) for the "Visible Label" pattern. - Integrates the new example into the `src/examples/index.ts`.
Introduces a reusable `FloatingInput` component and an example demonstrating the floating label pattern. This pattern improves form accessibility and usability by keeping labels visible even when input fields are populated.
❌ Deploy Preview for ux-good-patterns failed.
|
|
It looks like the Netlify deploy preview failed during the repo preparation step: This seems to be a Netlify/GitHub connectivity issue rather than a code problem. 
|
|
Salut @hyosua ! 👋 Désolé pour la review tardive – je n'avais pas vu ta PR, je viens seulement de la remarquer. My bad ! 🙈 C'est une super contribution ! Merci d'avoir pris le temps d'ajouter ça au projet ! En y réfléchissant, je me dis juste qu'on pourrait rendre l'exemple encore plus utile en le reframant légèrement : Renommer en "Always keep labels visible" (ou "Ne jamais masquer les labels") — ça couvre le problème de fond. Et proposer deux variantes dans les good examples :
Comme ça on montre qu'il y a plusieurs façons de résoudre le problème, tout en recommandant la plus simple. Ton travail sur le floating label est conservé et utile ! Qu'est-ce que tu en penses ? Niveau code : Quelques ajustements nécessairesComme un mois s'est écoulé, il y a eu des changements sur le repo. Il faudra rebase sur main et faire les modifications suivantes : 1. Supprimer les fichiers non liés
2. Convertir en TypeScript
3. Utiliser les variables du design systemLes couleurs en dur ne fonctionneront pas bien avec le dark mode : - text-amber-700
- text-gray-500
+ text-primary
+ text-muted-foreground4. Corriger l'attribut autocomplete- autoComplete={placeholder}
+ autoComplete="new-password" // ou la valeur appropriée( 5. Ajouter le support i18nLe projet supporte maintenant le français. Il faudra ajouter :
6. Ajouter
|
| placeholder={placeholder} | ||
| name={id} | ||
| type={type} | ||
| autoComplete={placeholder} |
There was a problem hiding this comment.
L'attribut autoComplete attend des valeurs standardisées comme :
- "new-password" - pour un nouveau mot de passe
- "current-password" - pour un mot de passe existant
- "email", "username", "tel", etc.
Là, il passe le texte du placeholder (ex: "Enter your new password") ce qui n'est pas une valeur valide. Le navigateur ignorera
cette valeur et l'autocomplétion ne fonctionnera pas correctement.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#specifications
There was a problem hiding this comment.
FIchier à mettre en tsx avec typage si possible
| /> | ||
| <label | ||
| htmlFor={id} | ||
| className="absolute -top-4 left-0 text-xs text-amber-700 transition-all |
There was a problem hiding this comment.
Les couleurs en dur ne fonctionneront pas bien avec le dark mode :
- text-amber-700
- text-gray-500
+ text-primary
+ text-muted-foreground| category: "Forms", | ||
| tags: ["accessibility", "forms", "labels", "placeholders"], | ||
| createdAt: "2025-12-22", | ||
| }; |
There was a problem hiding this comment.
Ajouter aiSummary au meta
export const meta = {
// ...champs existants
aiSummary: "Use floating labels instead of placeholder-only inputs..."
};
There was a problem hiding this comment.
FloatingInput.tsx devrait être dans src/examples/floating-label/ plutôt que dans src/components/ car il est spécifique à cet exemple.
2 participants
feat: Implement and demonstrate Floating Labels for improved form UX
This PR introduces the "Floating Label" pattern, providing a robust and accessible alternative to placeholder-only inputs, especially in forms.
Why Floating Labels?
Placeholder-only inputs can lead to significant usability and accessibility issues:
****and no context. Persistent labels prevent this frustration.What's Included:
FloatingInputComponent: A new reusable React component (src/components/FloatingInput.jsx) that implements the floating label behavior using Tailwind CSS.BadExample.tsx): Demonstrates the common pitfalls of relying solely on placeholders, especially for similar fields like password confirmation.GoodExample.tsx): Showcases theFloatingInputcomponent in action, including integrated password visibility toggles, highlighting best practices.README.md): A detailed explanation of floating labels, their benefits, and guidance on when to apply or avoid this pattern.src/examples/floating-label/index.tsto make these examples discoverable within our component library/showcase.