Champ de saisie

Saisie et validation manuelle de contenu ; prend en charge le mode contrôlé / non contrôlé, la limite de caractères, l'effacement et l'auto-adaptation multiligne.

Utilisation de base

Saisie contrôlée

Valeur actuelle : (vide)

import { useState } from 'react'
import { LhInput } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('')

  return <LhInput value={value} onChange={(val) => setValue(val)} placeholder="Champ de saisie contrôlé" />
}

Fonctionnalités

Effacement / limite de caractères / mot de passe / multiligne auto-adaptatif

0/10

import { LhInput } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhInput placeholder="Effaçable" clearable />
      <LhInput placeholder="Limite de caractères" maxlength={10} showWordLimit />
      <LhInput placeholder="Mot de passe" type="password" />
      <LhInput
        placeholder="Saisie multiligne"
        type="textarea"
        autosize={{ minRows: 2, maxRows: 4 }}
      />
    </>
  )
}

Input Props

Prop	Description	Type	Options	Valeur par défaut
value	Valeur contrôlée	string	—	—
defaultValue	Valeur par défaut en mode non contrôlé	string	—	—
type	Type natif	'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'search' | 'textarea' | ...	—	'text'
placeholder	Espace réservé	string	—	Repli du pack de langue (zh-CN : 请输入)
disabled	Désactivé	boolean	—	false
readonly	Lecture seule	boolean	—	false
maxlength	Longueur maximale de saisie (tronquée au-delà)	number	—	—
showWordLimit	Afficher le comptage des caractères	boolean	—	false
clearable	Effaçable	boolean	—	false
showPassword	Affichage / masquage du mot de passe (lorsque type vaut password, un bouton en forme d'œil est rendu en suffixe ; nouveauté React)	boolean	—	false
autosize	Hauteur multiligne auto-adaptative	boolean | { minRows?: number; maxRows?: number }	—	false
label	Libellé flottant	string	—	—
prefixIcon / suffixIcon	Icônes de préfixe / suffixe	LhIconName	—	—
size	Taille	'large' | 'middle' | 'small'	—	Selon ConfigProvider
name	Attribut name natif	string	—	—
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
sx	Raccourci de mise en page	SxProps	—	—

Événements de Input

Événement	Description	Signature du rappel	Équivalent Vue
onChange	Changement de valeur (deux paramètres)	(value: string, event: ChangeEvent) => void	@change
onInput	Événement natif de saisie	(event: InputEvent) => void	@input
onFocus	Prise de focus	(event: FocusEvent) => void	@focus
onBlur	Perte de focus	(event: FocusEvent) => void	@blur
onClear	Clic sur le bouton d'effacement	(event: MouseEvent) => void	@clear
onKeyDown	Événement clavier natif	(event: KeyboardEvent) => void	@keydown

Les deux paramètres de onChange

onChange(value, event) est isomorphe au emit('change', [val, e]) de lh-ui-plus, afin de faciliter les migrations. Voir le guide de migration.

ref

forwardRef<HTMLInputElement | HTMLTextAreaElement> — l'élément natif focusable.

Styles

import '@lh-ui/react/style/input'