merisia-input-number

<merisia-input-number>

Champ de saisie numérique avec suffixe optionnel (unité, devise) et option de police monospace. Étend merisia-input avec inputmode="numeric".

Démos

Distance avec suffixe

<merisia-input-number
  label="Distance"
  name="distance"
  suffix="km"
  hint="Entrez la distance en kilomètres."
></merisia-input-number>

Montant avec devise

<merisia-input-number
  label="Montant"
  name="amount"
  suffix="$"
  monospace
  placeholder="0.00"
></merisia-input-number>

Police monospace (sans suffixe)

<merisia-input-number
  label="Code postal"
  name="zip"
  monospace
  placeholder="A1A 1A1"
></merisia-input-number>

Requis avec limite

<merisia-input-number
  label="Âge"
  name="age"
  suffix="ans"
  required
  maxlength="3"
></merisia-input-number>

Propriétés

Propriété	Attribut	Type	Défaut	Description
MerisiaInputNumber (propres)
suffix	suffix	string	''	Texte affiché à droite du champ (unité, devise…)
monospace	monospace	boolean	false	Active la police à espacement fixe via `:host([monospace])`
MerisiaInput (hérités — voir merisia-input)
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
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 maximale en caractères : `max-width: calc(N ch + 1.5rem)`

Import

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