Input 入力フィールド

テキスト / 複数行の入力です。前後サフィックス、クリア、文字数カウント、maxlength の切り詰め、フォームバリデーションとの連動をサポートします。

入力フィールドの形状

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="text" placeholder="内容を入力してください" clearable name="title" />
      <LhInput v-model="text" prefix-icon="search" suffix-icon="close" placeholder="前後サフィックスアイコン" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="secret" type="password" placeholder="パスワード" autocomplete="new-password" />
      <LhInput v-model="text" readonly placeholder="読み取り専用" />
      <LhInput v-model="text" disabled placeholder="無効状態" />
    </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="複数行テキスト（rows=2）" resize="vertical" />
      <LhInput v-model="poem" type="textarea" autosize placeholder="行の高さを自動調整" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="limited" :maxlength="20" show-word-limit placeholder="文字数カウント" />
      <LhInput v-model="text" label="浮動ラベル" placeholder="placeholder と排他" />
    </div>
    <p class="demo-note">現在の値：{{ text || '（空）' }}</p>
  </div>
</template>

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

Props

プロパティ	説明	型	デフォルト値
v-model	バインド値（model: modelValue/input）	string	—
type	コントロールのタイプ	'text' \| 'textarea' \| 'password' \| …	'text'
size	サイズ	'small' \| 'medium' \| 'large'	'medium'
placeholder	プレースホルダーテキスト。省略時は言語パッケージを使用	string	t('input.placeholder')
clearable	クリアボタンを表示	boolean	false
prefixIcon / suffixIcon	前後サフィックスのアイコン。内蔵の LhIcon 名を指定	string	—
maxlength / minlength	ネイティブの長さ制限	number	—
showWordLimit	文字数カウントを表示（maxlength が必要）	boolean	false
autosize	textarea の行の高さを自動調整	boolean \| {minRows,maxRows}	false
disabled / readonly	無効 / 読み取り専用	boolean	false
autofocus	マウント時に自動フォーカス	boolean	false
autocomplete	ネイティブ autocomplete	string	'off'
nativeType	ネイティブ type（type=text のとき有効）	string	'text'
resize	textarea のリサイズハンドルの方向	'none' \| 'both' \| 'horizontal' \| 'vertical'	—
name / form	ネイティブの name / form 属性	string	—
tabindex	ネイティブ tabindex	number \| string	—
inputStyle	入力要素のインラインスタイル	Record<string, string>	—
label	浮動ラベル（placeholder と排他）	string	—
themeVars / bgPattern / sx	テーマの上書き	—	—

Events

イベント	説明	コールバックパラメータ
input	v-model のイベント	(val, e)
change	値が変化したときに発火	—
focus	フォーカスを取得したときに発火	—
blur	フォーカスを失ったときに発火	—
clear	クリアしたときに発火	—
keydown	キーを押したときに発火	—

フォーム連動

LhFormItem 内に置かれ、バリデーションに失敗した場合、ネイティブコントロールに自動的に aria-invalid="true" が付与されます。