Champ de saisie

Saisie de texte sur une ou plusieurs lignes. Prend en charge préfixe/suffixe, effacement, compteur de caractères, troncation par maxlength et la liaison avec la validation de formulaire.

Variantes du champ de saisie

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="text" placeholder="Saisissez du contenu" clearable name="title" />
      <LhInput v-model="text" prefix-icon="search" suffix-icon="close" placeholder="Icônes préfixe/suffixe" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="secret" type="password" placeholder="Mot de passe" autocomplete="new-password" />
      <LhInput v-model="text" readonly placeholder="Lecture seule" />
      <LhInput v-model="text" disabled placeholder="État désactivé" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap; align-items: center">
      <LhInput v-model="text" size="small" placeholder="small" />
      <LhInput v-model="text" size="medium" placeholder="medium" />
      <LhInput v-model="text" size="large" placeholder="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="poem" type="textarea" :rows="2" placeholder="Texte multiligne (rows=2)" resize="vertical" />
      <LhInput v-model="poem" type="textarea" autosize placeholder="Hauteur de ligne automatique" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="limited" :maxlength="20" show-word-limit placeholder="Compteur de caractères" />
      <LhInput v-model="text" label="Étiquette flottante" placeholder="Exclusive avec placeholder" />
    </div>
    <p class="demo-note">Valeur actuelle : {{ text || '(vide)' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({ text: '', secret: '', poem: '', limited: '' }),
}
</script>

Props

Propriété	Description	Type	Valeur par défaut
v-model	Valeur liée (model : modelValue/input)	string	—
type	Type de contrôle	'text' \| 'textarea' \| 'password' \| …	'text'
size	Taille	'small' \| 'medium' \| 'large'	'medium'
placeholder	Texte du placeholder, pack de langue par défaut	string	t('input.placeholder')
clearable	Affiche le bouton d'effacement	boolean	false
prefixIcon / suffixIcon	Icônes de préfixe/suffixe, noms des icônes LhIcon intégrées	string	—
maxlength / minlength	Limites de longueur natives	number	—
showWordLimit	Affiche le compteur de caractères (requiert maxlength)	boolean	false
autosize	Hauteur de ligne automatique du textarea	boolean \| {minRows,maxRows}	false
disabled / readonly	Désactivé / lecture seule	boolean	false
autofocus	Focus automatique au montage	boolean	false
autocomplete	Attribut autocomplete natif	string	'off'
nativeType	Attribut type natif (actif lorsque type=text)	string	'text'
resize	Direction de la poignée de redimensionnement du textarea	'none' \| 'both' \| 'horizontal' \| 'vertical'	—
name / form	Attributs name / form natifs	string	—
tabindex	Attribut tabindex natif	number \| string	—
inputStyle	Style en ligne de l'élément de saisie	Record<string, string>	—
label	Étiquette flottante (exclusive avec placeholder)	string	—
themeVars / bgPattern / sx	Surcharge du thème	—	—

Events

Événement	Description	Paramètres de rappel
input	Événement v-model	(val, e)
change	Déclenché lorsque la valeur change	—
focus	Déclenché à l'obtention du focus	—
blur	Déclenché à la perte de focus	—
clear	Déclenché lors de l'effacement	—
keydown	Déclenché à l'appui sur une touche	—

Intégration aux formulaires

Placé dans un LhFormItem, le contrôle natif reçoit automatiquement aria-invalid="true" en cas d'échec de validation.