Sélecteur avec recherche (combobox)
Une liste déroulante filtrable au clavier pour choisir une ou plusieurs valeurs, affichées en pastilles, adossée à un vrai champ select.
- Tailwind
- React
- CSS
- WordPress
Description
Tapez quelques lettres pour filtrer la liste, sans tenir compte des accents ; la partie trouvée est surlignée. En choix multiple, chaque valeur devient une pastille que l'on retire d'un clic ou avec Retour arrière ; en choix simple, le champ reprend la valeur choisie si l'on s'en va sans valider. Un select natif reste la source de vérité : c'est lui qui part avec le formulaire, et lui seul qui s'affiche sans JavaScript. Accessibilité : motif combobox ARIA 1.2 (aria-expanded, aria-activedescendant, listbox multisélectionnable), flèches haut et bas, Entrée, Échap, Alt + flèche haut ; résultats et ajouts annoncés dans une zone live ; contrastes AA en clair et en sombre ; aucune animation avec prefers-reduced-motion.
Code
Chargement du code…
Contenu de l'archive
champ-selection-combobox-html-tailwind.zip3 fichiers · 8 Ko
- index.html43 Ko
- README.md3 Ko
- LICENSE.md1 Ko
Mots-clés
Mis à jour le 16 octobre 2026.
Dans le même esprit
Trois écrans cohérents dans une même carte : connexion, création de compte avec critères de mot de passe en direct, et demande de réinitialisation.
- Tailwind
- React
- CSS
- WordPress
Un champ e-mail et son bouton sur une ligne, une case de consentement RGPD, des erreurs claires, une suggestion en cas de faute de frappe et un message de confirmation.
- Tailwind
- React
- CSS
- WordPress
Un formulaire court pour artisan : type de prestation, description, code postal, délai, photos facultatives, puis un récapitulatif de confirmation.
- Tailwind
- React
- CSS
- WordPress
Réservation de créneaux
GratuitUn formulaire de prise de rendez-vous : motif, jour avec le sélecteur de date natif, créneaux du matin et de l'après-midi en boutons radio, créneaux complets barrés et résumé du choix.
- Tailwind
- React
- CSS
- WordPress