Input Component
CSS-only Tailwind CSS input with primary, secondary, accent, and semantic color variants. Sizes xs–xl, prefix and suffix addon slots, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Les composants d'entrée capturent les données utilisateur via des champs de texte, un e-mail, un mot de passe et d'autres types d'entrée. Le système de saisie Frutjam fournit des contrôles de formulaire HTML sémantiques avec le style CSS Tailwind pour plusieurs tailles, couleurs et états de validation. Conçues pour l’accessibilité et un comportement réactif, les entrées s’intègrent parfaitement aux bibliothèques et frameworks de validation de formulaires.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| input | Base | Champ de saisie de texte stylisé |
| input-outline | Style | Remplissage transparent avec bordure visible |
| input-soft | Style | Fond teinté en sourdine |
| input-ghost | Style | Aucune bordure visible jusqu'à la mise au point |
| input-dashed | Style | Style de bordure en pointillés |
| input-square | Style | Pas de rayon de frontière |
| input-disabled | Modificateur | Apparence désactivée pour les éléments non saisis |
| input-xs | Taille | Très petit |
| input-sm | Taille | Petit |
| input-md | Taille | Moyen (par défaut) |
| input-lg | Taille | Grand |
| input-xl | Taille | Très grand |
| input-2xl | Taille | 2× très grand |
| input-primary | Couleur | Bordure de couleur du thème principal |
| input-secondary | Couleur | Bordure de couleur du thème secondaire |
| input-accent | Couleur | Bordure de couleur du thème d'accentuation |
| input-neutral | Couleur | Bordure de couleur thème neutre |
| input-info | Couleur | Bordure de couleur sémantique d'information |
| input-success | Couleur | Bordure de couleur sémantique du succès |
| input-warning | Couleur | Bordure de couleur sémantique d'avertissement |
| input-error | Couleur | Bordure de couleur sémantique d'erreur |
Utilisation de base
<input type="text" placeholder="Enter your text here" class="input"> |
<input type="text" placeholder="Enter your text here" className="input"> |
Tailles d'entrée
1 2 3 4 5 6 | <input type="text" class="input input-xs" placeholder="Xsmall"> <input type="text" class="input input-sm" placeholder="Small"> <input type="text" class="input input-md" placeholder="Medium"> <input type="text" class="input input-lg" placeholder="Large"> <input type="text" class="input input-xl" placeholder="Xlarge"> <input type="text" class="input input-2xl" placeholder="2XLarge"> |
Couleurs d'entrée
1 2 3 4 5 6 7 8 9 | <input type="text" class="input" placeholder="Default"> <input type="text" class="input input-primary" placeholder="Primary"> <input type="text" class="input input-secondary" placeholder="Secondary"> <input type="text" class="input input-accent" placeholder="Accent"> <input type="text" class="input input-neutral" placeholder="Neutral"> <input type="text" class="input input-info" placeholder="Info"> <input type="text" class="input input-success" placeholder="Success"> <input type="text" class="input input-warning" placeholder="Warning"> <input type="text" class="input input-error" placeholder="Error"> |
Styles d'entrée
1 2 3 4 5 | <input type="text" class="input" placeholder="Default"> <input type="text" class="input input-outline" placeholder="Outline"> <input type="text" class="input input-soft" placeholder="Soft"> <input type="text" class="input input-dashed" placeholder="Dashed"> <input type="text" class="input input-ghost" placeholder="Ghost"> |
Carré d'entrée
Utilisez input-square pour les entrées à un seul caractère de largeur fixe comme les champs OTP ou PIN.
1 2 3 4 | <input type="text" class="input input-square input-xs" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-sm" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-md" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-lg" maxlength="1" placeholder="0"> |
Entrée désactivée
1 2 | <input type="text" class="input" placeholder="Enabled input"> <input type="text" class="input input-disabled" placeholder="Disabled input" disabled> |
Entrée avec étiquette
1 2 3 4 5 6 7 8 9 | <label> <span>Email address</span> <input type="email" class="input input-outline w-full" placeholder="you@example.com"> </label> <label> <span>Password</span> <input type="password" class="input input-outline input-primary w-full" placeholder="Enter password"> </label> |