merisia-input

<merisia-input>

Champ de saisie texte accessible, form-associated, avec libellé, aide et gestion d'erreur intégrés.

Démos

Champ texte de base

<merisia-input
  label="Prénom"
  name="first-name"
  placeholder="Votre prénom"
  autocomplete="given-name"
  autocapitalize="words"
></merisia-input>

Courriel avec autocomplétion

<merisia-input
  label="Adresse courriel"
  type="email"
  name="email"
  hint="Exemple : prenom.nom@domaine.ca"
  autocomplete="email"
  spellcheck="false"
></merisia-input>

Avec erreur

const el = document.querySelector('merisia-input');
el.errors = ["L'adresse courriel est invalide."];

Avec limite de caractères (saisie au-delà permise)

<merisia-input
  label="Nom d'utilisateur"
  name="username"
  hint="30 caractères maximum."
  maxlength="30"
></merisia-input>

Requis

<merisia-input label="Nom de famille" name="last-name" required
  autocomplete="family-name"></merisia-input>

Désactivé

<merisia-input label="Champ désactivé" name="disabled" value="Non modifiable" disabled></merisia-input>

Largeur en caractères (UK GOV pattern)

La propriété width (disponible sur tous les composants) fixe le max-width de l'élément hôte en unités ch. Utile pour les champs de date, codes postaux, etc.

<merisia-input label="Jour"  name="day"  width="2"  placeholder="JJ"></merisia-input>
<merisia-input label="Année" name="year" width="4"  placeholder="AAAA"></merisia-input>
<merisia-input label="Code postal" name="postal" width="7"></merisia-input>

Propriétés

Propriété	Attribut	Type	Défaut	Description
MerisiaInput (propres)
type	type	'text' \| 'email' \| 'tel' \| 'url' \| 'number' \| 'search' \| 'password'	'text'	Type du champ de saisie HTML
autocomplete	autocomplete	string	''	Attribut HTML autocomplete
autocorrect	autocorrect	boolean	false	Correction automatique (Safari/iOS)
autocapitalize	autocapitalize	string	''	Capitalisation automatique
spellcheck	spellcheck	boolean	true	Vérification orthographique
minlength	minlength	number	–	Longueur minimale de saisie
pattern	pattern	string	''	Motif de validation (expression régulière)
MerisiaTextFieldBase (hérités)
label	label	string	''	Texte du libellé
hint	hint	string	''	Aide contextuelle affichée sous le libellé
errors	–	string[]	[]	Liste de messages d'erreur (propriété JS uniquement)
errorPrefix	error-prefix	string	'Erreur :'	Préfixe des messages d'erreur (i18n, visuellement masqué)
placeholder	placeholder	string	''	Texte indicatif dans le champ vide
readonly	readonly	boolean	false	Rend le champ non modifiable
invalid	invalid	boolean	false	État d'erreur (synchronisé automatiquement avec `errors`)
maxlength	maxlength	number	–	Longueur maximale ; active le compteur de caractères (saisie au-delà permise)
charsRemainingOne	chars-remaining-one	string	'{n} caractère restant'	Gabarit singulier du compteur restant (i18n)
charsRemainingOther	chars-remaining-other	string	'{n} caractères restants'	Gabarit pluriel du compteur restant (i18n)
charsOverLimitOne	chars-over-limit-one	string	'Vous avez saisi {over} caractère en trop.'	Message dépassement singulier (i18n)
charsOverLimitOther	chars-over-limit-other	string	'Vous avez saisi {over} caractères en trop.'	Message dépassement pluriel (i18n)
MerisiaFormElement (hérités)
name	name	string	''	Nom du champ dans le formulaire
value	value	string	''	Valeur actuelle
required	required	boolean	false	Rend le champ obligatoire
disabled	disabled	boolean	false	Désactive le champ
MerisiaElement (hérités)
id	id	string	auto-généré	Identifiant unique du composant
lang	lang	string	'fr'	Langue pour les messages internes (i18n)
width	width	number	–	Largeur en nombre de caractères : `max-width: calc(N ch + 1.5rem)`

Ressources externes

Import

import '@merisia-inc/merisia-components/input';