componentes / input
Input
Todas as props nativas de <input>, mais o diferencial da lib: máscaras BR (cpf, cnpj, cei, cep) e globais (phone, creditCard, cardExpiry, date, time).
Como usar
Todas as props nativas de `<input>`, mais `mask`, que formata cpf/cnpj/cei/cep (BR) e phone/creditCard/cardExpiry/date/time (globais) em tempo real enquanto o usuário digita. O foco pode ser um `ring` (padrão) ou apenas um `outline`.
import { Input } from "vaiperui"; <Input label="Telefone" mask="phone" /><Input label="E-mail" placeholder="voce@empresa.com" errorMessage="Informe um e-mail válido"/>Cores
<Input variantColor="primary" label="Nome" placeholder="Digite seu nome" /><Input variantColor="success" label="Nome" placeholder="Digite seu nome" /><Input variantColor="warning" label="Nome" placeholder="Digite seu nome" /><Input variantColor="danger" label="Nome" placeholder="Digite seu nome" />Foco
`ring` (padrão) desenha um anel e destaca a borda; `outline` desenha apenas um contorno.
<Input variant="ring" label="Nome" placeholder="Foco com anel" /><Input variant="outline" label="Nome" placeholder="Foco só com outline" />Máscaras
O diferencial da lib: formatação automática enquanto o usuário digita, sem lib externa.
<Input mask="cpf" label="CPF" /><Input mask="cnpj" label="CNPJ" /><Input mask="cei" label="CEI" /><Input mask="cep" label="CEP" /><Input mask="phone" label="Telefone" /><Input mask="creditCard" label="Cartão" /><Input mask="cardExpiry" label="Validade" /><Input mask="date" label="Data" /><Input mask="time" label="Hora" />Tamanhos
<Input size="sm" label="Nome" /><Input size="md" label="Nome" /><Input size="lg" label="Nome" />Raio
<Input radius="none" label="Nome" /><Input radius="sm" label="Nome" /><Input radius="md" label="Nome" /><Input radius="lg" label="Nome" /><Input radius="full" label="Nome" />Estados
`helperText` adiciona ajuda; a simples presença de `errorMessage` força o estado de erro.
<Input label="Nome" helperText="Nome completo" /><Input label="E-mail" errorMessage="Informe um e-mail válido" />Cor personalizada
`customColor` sobrescreve `variantColor` e pinta borda e foco a partir de uma única cor, ou de um objeto `{ light, dark }` com uma cor para cada tema.
<Input customColor="#ff6600" label="Nome" placeholder="Digite seu nome" /><Input customColor="#22c55e" label="Nome" placeholder="Digite seu nome" /><Input customColor="#a78bfa" label="Nome" placeholder="Digite seu nome" /><Input customColor={{ light: "#a855f7", dark: "#fde047" }} label="Nome" placeholder="Digite seu nome"/>Props
| Prop | Valores | Padrão | Descrição |
|---|---|---|---|
| variant | ring | outline | ring | Estilo de foco: ring desenha um anel (box-shadow) e destaca a borda; outline desenha apenas um contorno |
| variantColor | primary | success | warning | danger | primary | Cor da borda/anel ao focar |
| customColor | cor CSS válida | { light, dark } | — | Sobrescreve variantColor: pinta borda e foco a partir de uma única cor, ou de um objeto { light, dark } com uma cor para cada tema |
| size | sm | md | lg | md | Altura e tamanho de fonte |
| radius | none | sm | md | lg | full | md | Arredondamento |
| animation | none | smooth | fast | bounce | smooth | Transição da borda/anel de foco |
| label | string | — | Rótulo acima do campo (associado ao input) |
| helperText | string | — | Texto de ajuda abaixo do campo |
| errorMessage | string | — | Presença sozinha já força o estado de erro, independente de variantColor/customColor |
| leadingIcon / trailingIcon | ReactNode | — | Ícone dentro do campo, à esquerda/direita |
| mask | cpf | cnpj | cei | cep | phone | creditCard | cardExpiry | date | time | — | Formata o valor automaticamente enquanto o usuário digita (controlado ou não); o onChange emite a string já mascarada |
| (nativas) | InputHTMLAttributes<HTMLInputElement> | — | value, defaultValue, onChange, placeholder, disabled, type, aria-*, className etc. |