merisia-textarea

<merisia-textarea>

Zone de texte multiligne avec compteur de caractères accessible et dépassement de limite autorisé (affiche l'état invalide sans bloquer la saisie).

Import

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

Extension

Vous pouvez sous-classer ce composant pour ajouter ou redéfinir des propriétés, méthodes ou styles : 

import { customElement } from 'lit/decorators.js';
import { MerisiaTextarea } from '@merisia-inc/merisia-components';

@customElement('my-textarea')
export class MyTextarea extends MerisiaTextarea {
  // Ajoutez ou redéfinissez des propriétés, méthodes ou styles ici.
}

Démos

Basique

<merisia-textarea label="Description" name="desc" rows="4"></merisia-textarea>

Avec limite et compteur (dépassement autorisé)

Saisissez plus de 200 caractères pour voir l'état invalide et le décompte. 

<merisia-textarea
  label="Commentaire"
  name="comment"
  maxlength="200"
  rows="5"
  hint="Maximum 200 caractères."
></merisia-textarea>

Avec erreur

const el = document.querySelector('merisia-textarea');
el.errors = ["Ce champ est obligatoire."];

Propriétés

Propriété Attribut Type Défaut Description
MerisiaTextarea (propres)
rows rows number 4 Nombre de rangées visibles
minlength minlength number – Longueur minimale de saisie
hideCounter hide-counter boolean false Masque le compteur de caractères quand maxlength est défini
autoHeight auto-height boolean false Hauteur automatique selon le contenu (field-sizing: content)
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 la zone 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 (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 maximale en caractères : max-width: calc(N ch + 1.5rem)