KvcTextInput

テキスト入力フィールドコンポーネントです。text、password、email、numberなどの入力タイプに対応しています。

ライブデモ

基本的な使い方

<template>
  <kvc-text-input v-model="inputValue" />
</template>

<script setup>
import { ref } from 'vue'

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

プロパティ

プロパティ	型	デフォルト	説明
modelValue	`string \| number`	`''`	入力値（v-model）
type	`'text' \| 'password' \| 'email' \| 'number'`	`'text'`	入力タイプ
placeholder	`string`	-	プレースホルダーテキスト
readOnly	`boolean`	`false`	読み取り専用モード
disabled	`boolean`	`false`	無効化状態
maxlength	`number`	-	最大文字数
min	`number`	-	最小値（type="number"の場合）
max	`number`	-	最大値（type="number"の場合）
step	`number`	-	ステップ値（type="number"の場合）

イベント

イベント名	ペイロード	説明
update:modelValue	`string \| number`	入力値が変更されたときに発火
blur	`FocusEvent`	フォーカスが外れたときに発火
focus	`FocusEvent`	フォーカスが当たったときに発火
input	`Event`	入力時に発火

使用例

テキスト入力

<template>
  <kvc-field label="ユーザー名">
    <kvc-text-input
      v-model="username"
      placeholder="ユーザー名を入力してください"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

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

パスワード入力

<template>
  <kvc-field label="パスワード">
    <kvc-text-input
      v-model="password"
      type="password"
      placeholder="パスワードを入力してください"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

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

メールアドレス入力

<template>
  <kvc-field label="メールアドレス">
    <kvc-text-input
      v-model="email"
      type="email"
      placeholder="example@example.com"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

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

数値入力

<template>
  <kvc-field label="年齢">
    <kvc-text-input
      v-model="age"
      type="number"
      :min="0"
      :max="150"
      :step="1"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const age = ref(0)
</script>

読み取り専用

<template>
  <kvc-field label="ユーザーID">
    <kvc-text-input
      v-model="userId"
      :read-only="true"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const userId = ref('USER-12345')
</script>

無効化

<template>
  <kvc-field label="フィールド名">
    <kvc-text-input
      v-model="value"
      :disabled="true"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

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

最大文字数制限

<template>
  <kvc-field label="タイトル">
    <kvc-text-input
      v-model="title"
      :maxlength="50"
      placeholder="最大50文字まで入力できます"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

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

TypeScript サポート

import type { KvcTextInputProps } from '@zygapp/kintone-vue3-component'

const props: KvcTextInputProps = {
  modelValue: '',
  type: 'text',
  placeholder: 'テキストを入力',
  readOnly: false,
  disabled: false
}