Input 入力フィールド

入力フィールドコンポーネント。テキスト入力、パスワード、文字数カウントなどの機能に対応しています。

基本的な使い方

現在の値:

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <!-- 基本的な入力フィールド -->
  <LhInput v-model="value" placeholder="内容を入力してください" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <!-- 基本的な入力フィールド -->
  <LhInput v-model="value" placeholder="内容を入力してください" />
</template>

タイプ

vue

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
const password = ref('')
const clearable = ref('入力済み')
</script>

<template>
  <LhInput v-model="text" placeholder="テキスト入力" />
  <LhInput v-model="password" type="password" placeholder="パスワード入力" show-password />
  <LhInput v-model="clearable" placeholder="クリア可能入力" clearable />
</template>

vue

<script>
export default {
  data() {
    return {
      text: '',
      password: '',
      clearable: '入力済み',
    }
  },
}
</script>

<template>
  <LhInput v-model="text" placeholder="テキスト入力" />
  <LhInput v-model="password" type="password" placeholder="パスワード入力" show-password />
  <LhInput v-model="clearable" placeholder="クリア可能入力" clearable />
</template>

無効状態

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" disabled placeholder="無効な入力フィールド" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" disabled placeholder="無効な入力フィールド" />
</template>

文字数カウント

0/10

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="最大 10 文字" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="最大 10 文字" />
</template>

スロット

vue

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>unit</template>
  </LhInput>
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>unit</template>
  </LhInput>
</template>

カスタムテーマ

vue

<script setup lang="ts">
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
}
</script>

<template>
  <!-- theme-vars でテーマ変数をカスタマイズ -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="青花瓷入力フィールド" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

export default {
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <!-- theme-vars でテーマ変数をカスタマイズ -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="青花瓷入力フィールド" />
  </LhConfigProvider>
</template>

sx クイックレイアウト

sx プロパティでスペーシングを手早く設定できます。追加の CSS を書く必要はありません。

vue

<script setup lang="ts">
</script>

<template>
  <!-- 上側の間隔 2 -->
  <LhInput placeholder="上側の間隔 2" :sx="{ mt: 2 }" />
  <!-- 水平間隔 1、下側の間隔 3 -->
  <LhInput placeholder="水平間隔 1、下側の間隔 3" :sx="{ mx: 1, mb: 3 }" />
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 上側の間隔 2 -->
  <LhInput placeholder="上側の間隔 2" :sx="{ mt: 2 }" />
  <!-- 水平間隔 1、下側の間隔 3 -->
  <LhInput placeholder="水平間隔 1、下側の間隔 3" :sx="{ mx: 1, mb: 3 }" />
</template>

sx は 8px を基準にします：mt: 2 → marginTop: 16px。すべてのプロパティについてはsx クイックレイアウトを参照してください。

国際化

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <!-- ConfigProvider で言語パックを注入 -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">言語を切り替え</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhInput, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <!-- ConfigProvider で言語パックを注入 -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="toggleLocale">言語を切り替え</LhButton>
  </LhConfigProvider>
</template>

サイズと読み取り専用

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="読み取り専用入力フィールド" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="読み取り専用入力フィールド" />
</template>

前後缀アイコン

prefix-icon / suffix-icon で前後缀アイコンを設定します。内蔵 LhIcon のアイコン名（search、date など）を指定します。

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="プレフィックスアイコン" />
  <LhInput v-model="value" suffix-icon="date" placeholder="サフィックスアイコン" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="プレフィックスアイコン" />
  <LhInput v-model="value" suffix-icon="date" placeholder="サフィックスアイコン" />
</template>

ネイティブ属性と高さの自動調整

autocomplete、native-type、autofocus、minlength などのネイティブ属性は内部の入力フィールドにそのまま渡されます。autosize は textarea が内容に合わせて高さを自動調整するために使います。

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="自動フォーカス" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="高さの自動調整" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="自動フォーカス" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="高さの自動調整" />
</template>

Input API

Props

プロパティ名	説明	型	デフォルト値
modelValue	バインド値	`string`	—
type	入力フィールドのタイプ	`"number" \| "text" \| "textarea" \| "password" \| "email" \| "url" \| "tel" \| "date" \| "time"`	`'text'`
size	—	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	無効状態	`boolean`	`false`
readonly	読み取り専用状態	`boolean`	`false`
placeholder	プレースホルダーテキスト	`string`	—
maxlength	最大入力長	`number`	—
minlength	—	`number`	—
showWordLimit	文字数カウントを表示するか	`boolean`	`false`
clearable	クリア可能にするか	`boolean`	`false`
prefixIcon	プレフィックスアイコン名（内蔵 LhIcon アイコン）	`LhIconName`	—
suffixIcon	サフィックスアイコン名（内蔵 LhIcon アイコン）	`LhIconName`	—
autofocus	—	`boolean`	`false`
autocomplete	—	`string`	—
nativeType	—	`string`	—
autosize	—	`boolean \| { minRows?: number; maxRows?: number; }`	`false`
resize	—	`"none" \| "both" \| "horizontal" \| "vertical"`	`'vertical'`
name	—	`string`	—
rows	—	`number`	—
tabindex	—	`string \| number`	—
form	—	`string`	—
inputStyle	—	`{ [x: string]: string; }`	—
label	—	`string`	—
themeVars	コンポーネントレベルのテーマ変数。ConfigProvider の設定を上書き	`{ [x: string]: string; }`	—
bgPattern	コンポーネントレベルの背景紋様。ConfigProvider の設定を上書き	`string`	—
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

Events

イベント名	説明	コールバック引数
update:modelValue	値の更新イベント	`(value: string)`
input	入力イベント	`(value: string)`
change	値の変更イベント	`(value: string)`
focus	フォーカス取得イベント	`(event: FocusEvent)`
blur	フォーカス喪失イベント	`(event: FocusEvent)`
clear	クリアイベント	—
keydown	ネイティブ keydown イベント	`(event: KeyboardEvent)`

Slots

スロット名	説明
prefix	入力フィールドの先頭コンテンツ
suffix	入力フィールドの末尾コンテンツ

型定義

本コンポーネントが外部にエクスポートする TypeScript 型構造は以下のとおりです（packages/components/input/src/types.ts および @lh-ui/share/core/* ソースから自動抽出。各エントリをクリックすると完全な定義を確認できます。プロパティの説明は上記の Props 表を参照してください）：

LhInputType

export type LhInputType = typeof LH_INPUT_TYPE_CONST[keyof typeof LH_INPUT_TYPE_CONST]

LhInputSize

/**
 * Input のサイズ
 */
export type LhInputSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhInputState

export type LhInputState = typeof LH_INPUT_STATE_CONST[keyof typeof LH_INPUT_STATE_CONST]

LhInputProps

/**
 * Input Props インターフェース
 */
export interface LhInputProps {
  modelValue?: string
  type?: LhInputType
  size?: LhInputSize
  disabled?: boolean
  readonly?: boolean
  placeholder?: string
  maxlength?: number
  minlength?: number
  showWordLimit?: boolean
  clearable?: boolean
  /** プレフィックスアイコン名（内蔵 LhIcon アイコン、例：`search`） */
  prefixIcon?: LhIconName
  /** サフィックスアイコン名（内蔵 LhIcon アイコン、例：`date`） */
  suffixIcon?: LhIconName
  autofocus?: boolean
  autocomplete?: string
  nativeType?: string
  autosize?: boolean | { minRows?: number; maxRows?: number }
  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
  name?: string
  rows?: number
  tabindex?: number | string
  form?: string
  inputStyle?: Record<string, string>
  label?: string
  /** コンポーネントレベルのテーマ変数。ConfigProvider の設定を上書き */
  themeVars?: Record<string, string>
  /** コンポーネントレベルの背景紋様。ConfigProvider の設定を上書き */
  bgPattern?: string
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhIconName _{（@lh-ui/share/core/icon (svgs.ts) から）}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Input 入力フィールド ​

基本的な使い方 ​

タイプ ​

無効状態 ​

文字数カウント ​

スロット ​

カスタムテーマ ​

sx クイックレイアウト ​

国際化 ​

サイズと読み取り専用 ​

前後缀アイコン ​

ネイティブ属性と高さの自動調整 ​

Input API ​

Props ​

Events ​

Slots ​

型定義 ​