Поле ввода

Ручной ввод содержимого с его проверкой; поддерживаются контролируемый / неконтролируемый режимы, ограничение количества символов, очистка, многострочная авторегулировка высоты и др.

Базовое использование

Контролируемый ввод

Текущее значение: (пусто)

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="Контролируемое поле ввода" />
}

Возможности

Очистка / лимит символов / пароль / авторегулировка высоты

0/10

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

export default function Demo() {
  return (
    <>
      <LhInput placeholder="С очисткой" clearable />
      <LhInput placeholder="Лимит символов" maxlength={10} showWordLimit />
      <LhInput placeholder="Пароль" type="password" />
      <LhInput
        placeholder="Многострочный ввод"
        type="textarea"
        autosize={{ minRows: 2, maxRows: 4 }}
      />
    </>
  )
}

Props компонента Input

Проп	Описание	Тип	Допустимые значения	По умолчанию
value	Контролируемое значение	string	—	—
defaultValue	Неконтролируемое значение по умолчанию	string	—	—
type	Нативный тип	'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'search' | 'textarea' | ...	—	'text'
placeholder	Плейсхолдер	string	—	Из языкового пакета (zh-CN: 请输入)
disabled	Отключено	boolean	—	false
readonly	Только для чтения	boolean	—	false
maxlength	Максимальная длина ввода (обрезается при превышении)	number	—	—
showWordLimit	Показывать счётчик символов	boolean	—	false
clearable	С очисткой	boolean	—	false
showPassword	Показ / скрытие пароля (при type password в суффиксе выводится кнопка с глазом; нововведение React)	boolean	—	false
autosize	Авторегулировка высоты многострочного поля	boolean | { minRows?: number; maxRows?: number }	—	false
label	Плавающая метка	string	—	—
prefixIcon / suffixIcon	Значки в префиксе / суффиксе	LhIconName	—	—
size	Размер	'large' | 'middle' | 'small'	—	Из ConfigProvider
name	Нативный атрибут name	string	—	—
themeVars	Переменные темы на уровне компонента	Record<string, string>	—	—
sx	Сокращение для макета	SxProps	—	—

События Input

Событие	Описание	Сигнатура обратного вызова	Аналог во Vue
onChange	Изменение значения (два параметра)	(value: string, event: ChangeEvent) => void	@change
onInput	Нативное событие ввода	(event: InputEvent) => void	@input
onFocus	Получение фокуса	(event: FocusEvent) => void	@focus
onBlur	Потеря фокуса	(event: FocusEvent) => void	@blur
onClear	Нажатие на кнопку очистки	(event: MouseEvent) => void	@clear
onKeyDown	Нативное событие клавиатуры	(event: KeyboardEvent) => void	@keydown

Два параметра onChange

onChange(value, event) структурно совпадает с emit('change', [val, e]) в lh-ui-plus, что упрощает миграцию. Подробнее см. в Руководстве по миграции.

ref

forwardRef<HTMLInputElement | HTMLTextAreaElement> — нативный элемент, на который можно перевести фокус.

Стили

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