MeInput

Campo de entrada de texto com suporte a label, tooltip, mensagem de erro e variante de busca com ícone.

Playground

Importação

<script>
import { MeInput } from '@/components/global/utils/export/index'
</script>

Uso Básico

<MeInput placeholder="Digite algo..." />

Com Label

Nome

E-mail*

CPF

help_outline

Digite apenas os números do CPF

<!-- Simples -->
<MeInput label="Nome" placeholder="Digite seu nome" />

<!-- Obrigatório -->
<MeInput label="E-mail" :required="true" type="email" placeholder="seu@email.com" />

<!-- Com tooltip -->
<MeInput label="CPF" tooltip="Digite apenas os números" placeholder="000.000.000-00" />

Tipos

<MeInput type="text" placeholder="Texto..." />
<MeInput type="number" placeholder="Número..." />
<MeInput type="email" placeholder="E-mail..." />
<MeInput type="password" placeholder="Senha..." />

Variante Busca

O tipo search exibe um ícone de lupa e aplica padding-left no campo.

search

<MeInput type="search" placeholder="Buscar..." />

Estados

Desabilitado

Campo desabilitado

<MeInput label="Campo desabilitado" model-value="Valor fixo" :disabled="true" />

Com Erro

E-mail

E-mail inválido

<MeInput
  label="E-mail"
  placeholder="seu@email.com"
  error-message="E-mail inválido"
/>

v-model

Nome

Valor:

<script setup>
import { ref } from 'vue'
const texto = ref('')
</script>

<template>
  <MeInput v-model="texto" label="Nome" placeholder="Digite seu nome" />
  <p>Valor: {{ texto }}</p>
</template>

API

Props

Prop	Tipo	Padrão	Descrição
modelValue	string	''	Valor do campo (v-model)
placeholder	string	'Digite...'	Texto de placeholder
type	'text' | 'number' | 'email' | 'password' | 'search'	'text'	Tipo do input; 'search' ativa a variante com ícone de lupa
label	string	—	Label exibida acima do campo
required	boolean	false	Exibe asterisco na label indicando obrigatoriedade
errorMessage	string	—	Mensagem de erro exibida abaixo do campo em vermelho
tooltip	string	—	Texto do tooltip exibido ao passar o mouse na label
disabled	boolean	false	Desabilita o campo

Eventos

Evento	Payload	Descrição
update:modelValue	string	Emitido ao digitar, com o novo valor
blur	FocusEvent	Emitido quando o campo perde foco (somente variante texto)
focus	FocusEvent	Emitido quando o campo recebe foco (somente variante texto)

Acessibilidade

• A prop label cria um MeLabel associado ao input via atributo id ou name (passado via $attrs)
• A prop required adiciona o asterisco visual na label
• A prop tooltip exibe uma dica de preenchimento ao usuário
• O estado :focus-visible aplica o mixin drop-shadow-hard-blue como indicador de foco por teclado

Associando label ao input

Passe id diretamente no componente para que a label seja corretamente associada:

<MeInput id="campo-email" label="E-mail" v-model="email" />