Skip to content

Input

Saisie de texte avec règles de validation optionnelles. Préférez l'associer à Field pour le layout label, helper et erreur.

Avec 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>

Les règles s'exécutent au blur (et chemins de commit associés). Voir Rules.

Autonome

label / hint / error fonctionnent encore sans Field, mais Field est la composition recommandée.

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

Types

type : text | email | password | search | tel | url | number

Props d'intention

PropNotes
rulesValidation InputRule[]
requiredIntention required
clearableAffordance d'effacement
commitDelayDebounce ms pour update:committed (adapté à la recherche)
disabled / readonlyÉtat d'interaction

size est une échappatoire avancée ; préférez la densité du Design Kit.