Composant · Formulaire

PasswordInput

Stable

Champ mot de passe avec bascule de visibilité, tailles sm/md/lg, états helper/erreur et icônes Lucide `Eye` / `EyeOff`.

Exemples

Tailles

Voir le code (Svelte)

<div class="docs-demo-stack">
  <PasswordInput size="sm" placeholder="Mot de passe (sm)" />
  <PasswordInput size="md" placeholder="Mot de passe (md)" />
  <PasswordInput size="lg" placeholder="Mot de passe (lg)" />
</div>

Validation

Mot de passe Mélangez majuscules, minuscules et chiffres.

Mot de passe Le mot de passe est trop court.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <PasswordInput
    label="Mot de passe"
    placeholder="Au moins 8 caractères"
    helperText="Mélangez majuscules, minuscules et chiffres."
  />
  <PasswordInput
    label="Mot de passe"
    placeholder="Mot de passe"
    errorText="Le mot de passe est trop court."
    invalid
  />
</div>

États

Voir le code (Svelte)

<PasswordInput placeholder="Champ désactivé" disabled />

Liaison bidirectionnelle

Voir le code (Svelte)

<PasswordInput
  placeholder="Tapez votre mot de passe"
  value="secret42"
  modelValue="secret42"
/>

La valeur est bindable (value en Svelte/React, modelValue en Vue) ; figée ici pour la démonstration. Le bouton œil bascule la visibilité.

API

Prop	Type	Default
`value`	`string` (`$bindable`)	`""`
`visible`	`boolean` (`$bindable`)	`false`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`label`	`string`	optionnel
`helperText`	`string`	optionnel
`errorText`	`string`	optionnel
`invalid`	`boolean`	`false`
`showLabel`	`string`	`"Show password"`
`hideLabel`	`string`	`"Hide password"`
`disabled`	`boolean`	`false`

Le composant rend un <input type="password"> qui bascule vers type="text" quand visible passe à true. L'icône Lucide Eye (mot de passe masqué) ou EyeOff (mot de passe révélé) est rendue dans un bouton accessible : aria-pressed reflète l'état courant et aria-label bascule entre showLabel et hideLabel. autocomplete="current-password" est appliqué par défaut. La visibilité expose elle aussi $bindable pour piloter le toggle depuis le parent si nécessaire.

Tokens utilisés

--st-component-control-hoverBorder
--st-component-control-hoverBackground