Composant · Formulaire

Input

Stable

Champ de saisie texte sur une ligne, avec libellé, texte d'aide, état d'erreur et trois tailles. Construit sur un <input> natif lié à son <label>.

Titre du projet

Adresse e-mail Nous ne partagerons jamais votre adresse.

Identifiant Cet identifiant est déjà pris.

Voir le code (Svelte)

<Input label="Titre du projet" placeholder="Sent Tech Forge" />
<Input
  label="Adresse e-mail"
  type="email"
  helperText="Nous ne partagerons jamais votre adresse."
  placeholder="[email protected]"
/>
<Input
  label="Identifiant"
  errorText="Cet identifiant est déjà pris."
  value="forge"
  invalid
/>

Quand l'utiliser

Saisir une valeur courte sur une ligne : nom, e-mail, identifiant, URL.
Pour un texte multi-ligne, utilisez Textarea ; pour un choix dans une liste, Select.
Toujours fournir un libellé visible (prop label), pas seulement un placeholder.

États

Défaut, focus (anneau thémé), saisie, désactivé, et erreur. L'erreur s'active via invalid et/ou errorText ; errorText remplace alors le helperText.

Défaut · aide · désactivé · erreur

Titre du projet

Identifiant d'espace Minuscules, chiffres et tirets uniquement.

Titre du projet

Adresse e-mail Adresse e-mail invalide.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Input label="Titre du projet" placeholder="Sent Tech Forge" />
  <Input
    label="Identifiant d'espace"
    placeholder="forge-playground"
    helperText="Minuscules, chiffres et tirets uniquement."
  />
  <Input label="Titre du projet" value="Lecture seule" disabled />
  <Input
    label="Adresse e-mail"
    value="user@@domain"
    invalid
    errorText="Adresse e-mail invalide."
  />
</div>

Saisie liée (bind)

Recherche

Voir le code (Svelte)

<Input
  label="Recherche"
  value="forge-playground"
  modelValue="forge-playground"
  placeholder="Tapez…"
/>

La valeur est bindable (value en Svelte/React, modelValue en Vue) ; figée ici pour la démonstration multi-framework.

Tailles

sm (2 rem), md (2,5 rem, défaut), lg (3 rem).

Tailles

Small

Medium

Large

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Input label="Small" size="sm" placeholder="sm" />
  <Input label="Medium" size="md" placeholder="md" />
  <Input label="Large" size="lg" placeholder="lg" />
</div>

Types HTML

Tous les attributs natifs sont propagés : passez type, required, autocomplete, inputmode, maxlength, etc.

Types HTML

Téléphone

Quantité

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Input
    label="Email"
    type="email"
    placeholder="[email protected]"
    autocomplete="email"
  />
  <Input
    label="Téléphone"
    type="tel"
    inputmode="tel"
    placeholder="+1 555 010 0101"
  />
  <Input label="Quantité" type="number" min={0} max={99} placeholder="0" />
</div>

Anatomie

Conteneur (.st-field) : libellé + contrôle + message empilés.
Libellé (.st-field__label) lié au champ par le <label> englobant.
Contrôle (.st-control) : la boîte de saisie, avec bordure, focus et états.
Message : helperText (secondaire) ou errorText (rouge), jamais les deux.

Accessibilité

Le libellé est rendu dans un <label> qui englobe l'<input> : association native, pas besoin de for/id.
En erreur, aria-invalid="true" est posé sur le champ.
Le focus est toujours visible (bordure + anneau selon le thème).
N'utilisez pas le placeholder comme libellé : il disparaît à la saisie.

Lignes directrices

À faire

Libellé court et explicite au-dessus du champ.
Message d'erreur actionnable décrivant comment corriger.
Texte d'aide pour les formats attendus.

À éviter

Remplacer le libellé par un simple placeholder.
Afficher helperText et errorText en même temps.
Désactiver un champ sans expliquer pourquoi.

API

Prop	Type	Défaut	Description
`label`	`string`	optionnel	Libellé visible du champ.
`helperText`	`string`	optionnel	Texte d'aide sous le champ (masqué si errorText).
`errorText`	`string`	optionnel	Message d'erreur ; active aussi l'état invalide.
`invalid`	`boolean`	`false`	Force l'état erreur (aria-invalid).
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Hauteur du contrôle.
`value`	`string \| number \| null`	`""`	Valeur, bindable via bind:value.
`class`	`string`	optionnel	Classe(s) ajoutée(s) au conteneur.
Autres attributs	`HTMLInputAttributes`	N/A	Propagés sur l'<input> (type, placeholder, required, autocomplete…).

Tokens utilisés

--st-component-field-labelText
--st-component-field-helpText
--st-component-field-errorText
--st-component-control-background
--st-component-control-border
--st-component-control-hoverBorder
--st-component-control-hoverBackground
--st-component-control-focusRing
--st-component-control-invalidBorder
--st-component-control-disabledBackground
--st-component-control-placeholderText