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	値の変化（2 引数）	(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 の 2 引数

onChange(value, event) は lh-ui-plus の emit('change', [val, e]) と同型で、移行しやすくなっています。詳しくは移行ガイドを参照してください。

ref

forwardRef<HTMLInputElement | HTMLTextAreaElement> —— フォーカス可能なネイティブ要素です。

スタイル

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