Skip to content

Input

Entrada de texto com rules de validação opcionais. Prefira combinar com Field para o layout de label, helper e error.

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

As rules rodam no blur (e caminhos de commit relacionados). Veja Rules.

Standalone

label / hint / error ainda funcionam sem Field, mas Field é a composição recomendada.

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

Types

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

Props de intenção

PropNotes
rulesValidação InputRule[]
requiredIntenção required
clearableAffordance de limpar
commitDelayDebounce em ms para update:committed (amigável a search)
disabled / readonlyEstado de interação

size é um escape hatch avançado; prefira a density do Design Kit.