componentes / input
Input
Todas las props nativas de <input>, más el diferencial de la librería: máscaras de Brasil (cpf, cnpj, cei, cep) y globales (phone, creditCard, cardExpiry, date, time).
Cómo usar
Todas las props nativas de `<input>`, más `mask`, que formatea cpf/cnpj/cei/cep (BR) y phone/creditCard/cardExpiry/date/time (globales) en tiempo real mientras el usuario escribe. El foco puede ser un `ring` (predeterminado) o solo un `outline`.
import { Input } from "vaiperui"; <Input label="Teléfono" mask="phone" /><Input label="Correo" placeholder="tu@empresa.com" errorMessage="Ingresa un correo válido"/>Colores
<Input variantColor="primary" label="Nombre" placeholder="Escribe tu nombre" /><Input variantColor="success" label="Nombre" placeholder="Escribe tu nombre" /><Input variantColor="warning" label="Nombre" placeholder="Escribe tu nombre" /><Input variantColor="danger" label="Nombre" placeholder="Escribe tu nombre" />Foco
`ring` (predeterminado) dibuja un anillo y resalta el borde; `outline` dibuja solo un contorno.
<Input variant="ring" label="Nombre" placeholder="Foco con anillo" /><Input variant="outline" label="Nombre" placeholder="Foco solo con outline" />Máscaras
El diferencial de la librería: formato automático mientras el usuario escribe, sin librerías externas.
<Input mask="cpf" label="CPF" /><Input mask="cnpj" label="CNPJ" /><Input mask="cei" label="CEI" /><Input mask="cep" label="Cód. postal" /><Input mask="phone" label="Teléfono" /><Input mask="creditCard" label="Tarjeta" /><Input mask="cardExpiry" label="Vencimiento" /><Input mask="date" label="Fecha" /><Input mask="time" label="Hora" />Tamaños
<Input size="sm" label="Nombre" /><Input size="md" label="Nombre" /><Input size="lg" label="Nombre" />Radio
<Input radius="none" label="Nombre" /><Input radius="sm" label="Nombre" /><Input radius="md" label="Nombre" /><Input radius="lg" label="Nombre" /><Input radius="full" label="Nombre" />Estados
`helperText` agrega ayuda; la sola presencia de `errorMessage` fuerza el estado de error.
<Input label="Nombre" helperText="Nombre completo" /><Input label="Correo" errorMessage="Ingresa un correo válido" />Color personalizado
`customColor` sobrescribe `variantColor` y pinta borde y foco desde un único color, o un objeto `{ light, dark }` con un color para cada tema.
<Input customColor="#ff6600" label="Nombre" placeholder="Escribe tu nombre" /><Input customColor="#22c55e" label="Nombre" placeholder="Escribe tu nombre" /><Input customColor="#a78bfa" label="Nombre" placeholder="Escribe tu nombre" /><Input customColor={{ light: "#a855f7", dark: "#fde047" }} label="Nombre" placeholder="Escribe tu nombre"/>Props
| Prop | Valores | Predeterminado | Descripción |
|---|---|---|---|
| variant | ring | outline | ring | Estilo de foco: ring dibuja un anillo (box-shadow) y resalta el borde; outline dibuja solo un contorno |
| variantColor | primary | success | warning | danger | primary | Color del borde/anillo al enfocar |
| customColor | color CSS válido | { light, dark } | — | Sobrescribe variantColor: pinta borde y foco desde un único color, o desde un objeto { light, dark } con un color para cada tema |
| size | sm | md | lg | md | Altura y tamaño de fuente |
| radius | none | sm | md | lg | full | md | Redondeo |
| animation | none | smooth | fast | bounce | smooth | Transición del borde/anillo de foco |
| label | string | — | Etiqueta sobre el campo (asociada al input) |
| helperText | string | — | Texto de ayuda bajo el campo |
| errorMessage | string | — | Su sola presencia fuerza el estado de error, sin importar variantColor/customColor |
| leadingIcon / trailingIcon | ReactNode | — | Icono dentro del campo, a la izquierda/derecha |
| mask | cpf | cnpj | cei | cep | phone | creditCard | cardExpiry | date | time | — | Formatea el valor automáticamente mientras el usuario escribe (controlado o no); onChange emite el texto ya enmascarado |
| (nativas) | InputHTMLAttributes<HTMLInputElement> | — | value, defaultValue, onChange, placeholder, disabled, type, aria-*, className, etc. |