Passer au contenu principal
Frutjam logo Frutjam
v2.2.5
Theme

Composant d'entrée

Dernière mise à jour:

Entrée CSS Tailwind uniquement CSS avec variantes de couleurs primaires, secondaires, accentuées et sémantiques. Tailles xs-xl, emplacements pour modules complémentaires de préfixe et de suffixe, style fantôme. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

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
inputBaseChamp de saisie de texte stylisé
input-outlineStyleRemplissage transparent avec bordure visible
input-softStyleFond teinté en sourdine
input-ghostStyleAucune bordure visible jusqu'à la mise au point
input-dashedStyleStyle de bordure en pointillés
input-squareStylePas de rayon de frontière
input-disabledModificateurApparence désactivée pour les éléments non saisis
input-xsTailleTrès petit
input-smTaillePetit
input-mdTailleMoyen (par défaut)
input-lgTailleGrand
input-xlTailleTrès grand
input-2xlTaille2× très grand
input-primaryCouleurBordure de couleur du thème principal
input-secondaryCouleurBordure de couleur du thème secondaire
input-accentCouleurBordure de couleur du thème d'accentuation
input-neutralCouleurBordure de couleur thème neutre
input-infoCouleurBordure de couleur sémantique d'information
input-successCouleurBordure de couleur sémantique du succès
input-warningCouleurBordure de couleur sémantique d'avertissement
input-errorCouleurBordure 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

html 
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

html 
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

html 
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.

html 
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

html 
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

html 
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>

Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?

Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Saisir sur demande. Fini les cours hallucinés.

Essayez Cherry MCP