Input

Campo de entrada de texto. Compõe o Label do Arrow (rótulo + obrigatório), comunica erro e aceita um ícone à esquerda. Consome o DNA dos Fundamentos (04 Forma · interactive.md, 01 Cor · border default/accent/error, 02 Tipografia · body).

Componente Arrow

Este componente foi elevado ao padrão Arrow — reescrito sobre os Fundamentos, consumindo o DNA de tokens (cor, tipografia, forma, espaço, movimento) sem valor solto, com API limpa, acessibilidade e render validado. O selo no card confirma: virou Arrow de verdade.

Playground

Importação

import { Input } from '@arrow/components-vue'

Uso básico

Nome

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

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

Obrigatório

mandatory mostra o asterisco no Label e marca o input como required/aria-required.

E-mail*

<Input label="E-mail" type="email" mandatory placeholder="seu@email.com" />

Erro

errorMessage aplica a borda de erro, o texto abaixo e aria-invalid + aria-describedby.

E-mail

E-mail inválido

<Input label="E-mail" v-model="email" error-message="E-mail inválido" />

Com ícone · busca

icon recebe qualquer ícone do Arrow à esquerda — use search-01 para um campo de busca.

<Input v-model="busca" icon="search-01" placeholder="Buscar..." />

Desabilitado

Campo travado

<Input label="Campo travado" model-value="Valor fixo" disabled />

API

Props

Prop	Tipo	Padrão	Descrição
modelValue	string	''	Valor do campo. Use com v-model.
label	string	—	Rótulo (renderiza um Label associado via for).
mandatory	boolean	false	Asterisco no Label + required/aria-required.
errorMessage	string	—	Borda de erro + texto abaixo + aria-invalid.
type	'text' | 'email' | 'password' | 'number' | 'search'	'text'	Tipo nativo.
icon	string	—	Ícone do Arrow à esquerda (ex.: search-01).
placeholder	string	—	Placeholder nativo.
disabled	boolean	false	Desabilita o campo.
id	string	(gerado)	id do input (associa o Label).

Eventos

Evento	Payload	Descrição
update:modelValue	string	v-model — emitido ao digitar.

blur, focus e demais atributos/listeners caem no <input> interno (inheritAttrs: false).

Acessibilidade

• O label vira um <label for> real (Arrow Label) — clicar foca o input; leitores de tela vinculam.
• mandatory → required + aria-required no input (não só o asterisco visual).
• errorMessage → aria-invalid="true" + aria-describedby apontando pro texto do erro.
• Foco de teclado: borda de acento + anel (color.state.focus-ring).

Migração do MeInput

• required → mandatory (alinha com Label/Checkbox; agora também seta o required nativo + aria-required).
• type="search" → icon="search-01". A busca virou um ícone genérico à esquerda (qualquer ícone do Arrow), não um tipo mágico.
• tooltip (no label) → removido. Para uma dica, componha o Label diretamente com o slot #hint ao lado de um <Input> sem label.
• errorMessage mantido; agora também emite aria-invalid/aria-describedby.
• blur/focus → atributos nativos (caem no input via $attrs), não mais eventos declarados.