Skip to content

Input

任意のバリデーション規則付きテキスト入力。Field と組み合わせて label、helper、error レイアウトを取るのが望ましいです。

Field と一緒に

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Field, Input, rules } from 'pomikit-ui'

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

<template>
  <Field label="Email" required>
    <Input
      v-model="email"
      type="email"
      autocomplete="email"
      :rules="[rules.required(), rules.email()]"
    />
  </Field>
</template>

規則は blur(および関連する commit 経路)で走ります。Rules を参照。

単独

Field なしでも label / hint / error は使えますが、Field による組み合わせを推奨します。

vue
<Input v-model="q" type="search" placeholder="Search…" clearable :commit-delay="200" />

タイプ

typetext | email | password | search | tel | url | number

意図 props

Propメモ
rulesInputRule[] バリデーション
required必須意図
clearableクリア手段
commitDelayupdate:committed のデバウンス ms(検索向け)
disabled / readonly操作状態

size は高度な逃げ道です;Design Kit の密度を優先してください。