🎛️ Contrôles de formulaire

Appliquez un style amélioré aux champs de formulaire textuels tels que <input> et <textarea> grâce à Orochi, en leur offrant des dimensions harmonisées, des effets de focus personnalisés et une apparence moderne et soignée.

Comment ils fonctionnent

Les contrôles de formulaire Orochi sont conçus pour être flexibles et s'adapter à de nombreux cas d'usage. Ils utilisent des classes de base et des variantes qui permettent d'ajuster leur apparence, leur taille et leurs états (focus, désactivé, erreurs, etc.). Le système est entièrement modifiable via des variables CSS pour personnaliser couleurs, espacements et comportements visuels.

  • .o-form-group : conteneur pour étiquettes et contrôles (gère marges et alignement). Ajoute une marge inférieure de 1rem
  • .o-form-label : style standard pour les <label>
  • .o-form-control : classe de base pour <input>, <textarea>, etc.
  • .o-form-control-laptop / .o-form-control-phone : variantes de taille
  • Utilisez les variables CSS (ex. --o-form-control-border-radius, --o-form-control-padding) pour personnaliser l'apparence globale.

Accessibilité : les contrôles respectent les bonnes pratiques ARIA — assurez-vous d'utiliser les attributs aria-label / aria-describedby lorsque le contexte visuel n'est pas suffisant.

Exemple

Les contrôles de formulaire Orochi sont entièrement stylisés en CSS pur, à l'aide de variable personnalisées, ce qui leur permet de s'adapter automatiquement aux modes de couleur et de faciliter toute forme de personnalisation. 

<div class="o-form-group">
    <label for="exempleFormControlInput1" class="o-form-label">Address email</label>
    <input type="email" class="o-form-control" id="exempleFormControlInput1" placeholder="nom@exemple.com">
</div>
<div class="o-form-group">
    <label for="exempleFormControlTextarea1" class="o-form-label">Exemple de zone de texte</label>
    <textarea class="o-form-control" id="exempleFormControlTextarea1"></textarea>
</div>

Dimensionnement

Définissez les hauteurs à l’aide de classes telles que .o-form-control-laptop et .o-form-control-phone. 

      
<input class="o-form-control o-form-control-laptop" type="text" placeholder=".o-form-control-laptop" aria-label=".o-form-control-laptop example">
<input class="o-form-control" type="text" placeholder="base input" aria-label="base input example">
<input class="o-form-control o-form-control-phone" type="text" placeholder=".o-form-control-phone" aria-label=".o-form-control-phone example">