---
title: "Input"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Input with native HTML semantics. Labels, error states, icons, prefix/suffix, and multiple sizes for accessible, theme-aware form fields."
url: https://frutjam.com/fr/components/input
---

# Input Component

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

## Tailles d'entrée

```html
<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
<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
<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
<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
<input type="text" class="input" placeholder="Enabled input">
<input type="text" class="input input-disabled" placeholder="Disabled input" disabled>
```

## Entrée avec étiquette

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