Input
Un champ de saisie, avec son intitulé, un texte d'aide, un message d'erreur, des préfixes et des icônes. Huit couleurs, deux styles, cinq tailles.
Vue d'ensemble : color × size
Réglages
Chaque réglage correspond à une propriété du composant.
La couleur du contour. En erreur, elle devient rouge quelle que soit ce réglage.
Le style : avec contour, ou sans fond ni contour (ghost).
La taille, de très petit (xs) à très grand (xl).
Champ en erreur : contour rouge, et le message d'erreur remplace le texte d'aide.
Champ désactivé : grisé, et sans saisie possible.
Champ obligatoire pour envoyer le formulaire. Sans effet sur l'aspect.
L'intitulé au-dessus du champ. Vide, le champ n'a plus d'intitulé visible.
L'exemple grisé affiché tant que le champ est vide.
Le texte déjà saisi dans le champ.
Un texte d'aide sous le champ.
Le message affiché sous le champ en erreur. Vide, SoliBook n'affiche rien : le vrai composant retomberait sur le texte d'aide.
Un texte collé avant la saisie (ex. une devise, un https://).
Un texte collé après la saisie (ex. une unité).
Une icône avant la saisie.
Une icône après la saisie.
Le nom lu par les lecteurs d'écran. Vide, c'est l'intitulé qui sert de nom.
Le type de saisie : texte, e-mail, mot de passe… Sans effet sur l'aspect.
Le nom du champ, envoyé avec le formulaire.
L'identifiant du champ.
Des classes en plus, pour tester une personnalisation.
Le code correspondant
import Input from "@neo/ui/components/Input.astro";
<Input />