Input

Campo de texto com suporte a label, helper text, mensagem de erro e múltiplas variantes.

Uso

<script setup lang="ts">
import { Input } from '@halfbyte/maka'
import { ref } from 'vue'

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

<template>
  <Input v-model="value" label="Nome" placeholder="Digite seu nome" />
</template>

Variantes

<Input variant="outline" label="Outline" placeholder="Placeholder…" />
<Input variant="filled" label="Filled" placeholder="Placeholder…" />

Tamanhos

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

Com helper text e erro

<Input label="E-mail" helper-text="Nunca compartilharemos seu e-mail." />
<Input label="Senha" error-message="Senha deve ter no mínimo 8 caracteres." />

Props

Prop	Tipo	Padrão
variant	"outline" | "filled"	"outline"
size	"sm" | "md" | "lg"	"md"
modelValue	string	—
label	string	—
placeholder	string	—
helperText	string	—
errorMessage	string	—
type	"text" | "email" | "password" | "search" | "tel" | "url" | "number"	"text"
disabled	boolean	false
readonly	boolean	false
required	boolean	false

Events

Evento	Payload	Descrição
update:modelValue	string	Emitido ao alterar o valor
focus	FocusEvent	Emitido ao focar o campo
blur	FocusEvent	Emitido ao desfocar o campo