Input
Campo de texto canônico do ME — estende o UInput com máscara (telefone, CNPJ, data).
Componente EletroDS —
Input, usado no código como <MeInput>. Estende o UInput do Nuxt UI e adiciona máscara (maska). No Figma, use o componente da Library.O Input é o campo de texto do ME. O diferencial sobre o UInput puro é a máscara: telefone, CNPJ, CEP, data — o valor é formatado enquanto se digita. Vive sempre dentro de um FormField, que dá rótulo, ajuda e erro.
Variantes
| Quero… | Use |
|---|---|
| Formatar enquanto digita | mask (ex.: telefone, CNPJ, data) — o diferencial do ME |
| Ícone à esquerda/direita | icon / trailing (ex.: busca, limpar) |
| Valor numérico com stepper | número (− / +) para quantidade/valor |
| Ajustar densidade | size (sm em formulários densos) |
Estados
| Estado | Comportamento |
|---|---|
| Default | Vazio com placeholder, ou preenchido. |
| Focus | Anel de foco visível. |
disabled | Inerte, esmaecido. |
| Erro | Borda de erro + mensagem (via FormField). |
No código
<MeInput> é um componente EletroDS. Doc técnica em eletro.design/components/input. Aqui o foco é o uso em Design.
Acessibilidade
O rótulo vem do FormField — placeholder não substitui rótulo. Máscara não pode impedir colar/editar; o formato esperado deve estar na ajuda, não só implícito na máscara.