Input 輸入框

透過手動輸入並驗證內容，支援受控 / 非受控、字數限制、清空、多行自動調整等。

基礎用法

受控輸入

當前值：（空）

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 }}
      />
    </>
  )
}

Input Props

屬性	說明	型別	可選值	預設值
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) 與 lh-ui-plus 的 emit('change', [val, e]) 同構，方便遷移。詳見遷移指南。

ref

forwardRef<HTMLInputElement | HTMLTextAreaElement> —— 可聚焦原生元素。

樣式

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