components / input
Input
All the native <input> props, plus the library's differentiator: Brazilian masks (cpf, cnpj, cei, cep) and global ones (phone, creditCard, cardExpiry, date, time).
How to use
All the native `<input>` props, plus `mask`, which formats cpf/cnpj/cei/cep (BR) and phone/creditCard/cardExpiry/date/time (global) in real time as the user types. Focus can be a `ring` (default) or just an `outline`.
import { Input } from "vaiperui"; <Input label="Phone" mask="phone" /><Input label="Email" placeholder="you@company.com" errorMessage="Enter a valid email"/>Colors
<Input variantColor="primary" label="Name" placeholder="Type your name" /><Input variantColor="success" label="Name" placeholder="Type your name" /><Input variantColor="warning" label="Name" placeholder="Type your name" /><Input variantColor="danger" label="Name" placeholder="Type your name" />Focus
`ring` (default) draws a ring and highlights the border; `outline` draws only an outline.
<Input variant="ring" label="Name" placeholder="Ring focus" /><Input variant="outline" label="Name" placeholder="Outline-only focus" />Masks
The library's differentiator: automatic formatting as the user types, with no external lib.
<Input mask="cpf" label="CPF" /><Input mask="cnpj" label="CNPJ" /><Input mask="cei" label="CEI" /><Input mask="cep" label="ZIP" /><Input mask="phone" label="Phone" /><Input mask="creditCard" label="Credit card" /><Input mask="cardExpiry" label="Expiry" /><Input mask="date" label="Date" /><Input mask="time" label="Time" />Sizes
<Input size="sm" label="Name" /><Input size="md" label="Name" /><Input size="lg" label="Name" />Radius
<Input radius="none" label="Name" /><Input radius="sm" label="Name" /><Input radius="md" label="Name" /><Input radius="lg" label="Name" /><Input radius="full" label="Name" />States
`helperText` adds help; the mere presence of `errorMessage` forces the error state.
<Input label="Name" helperText="Full name" /><Input label="Email" errorMessage="Enter a valid email" />Custom color
`customColor` overrides `variantColor` and paints border and focus from a single color, or a `{ light, dark }` object with one color per theme.
<Input customColor="#ff6600" label="Name" placeholder="Type your name" /><Input customColor="#22c55e" label="Name" placeholder="Type your name" /><Input customColor="#a78bfa" label="Name" placeholder="Type your name" /><Input customColor={{ light: "#a855f7", dark: "#fde047" }} label="Name" placeholder="Type your name"/>Props
| Prop | Values | Default | Description |
|---|---|---|---|
| variant | ring | outline | ring | Focus style: ring draws a ring (box-shadow) and highlights the border; outline draws only an outline |
| variantColor | primary | success | warning | danger | primary | Border/ring color on focus |
| customColor | valid CSS color | { light, dark } | — | Overrides variantColor: paints border and focus from a single color, or from a { light, dark } object with one color per theme |
| size | sm | md | lg | md | Height and font size |
| radius | none | sm | md | lg | full | md | Rounding |
| animation | none | smooth | fast | bounce | smooth | Border/focus ring transition |
| label | string | — | Label above the field (associated with the input) |
| helperText | string | — | Help text below the field |
| errorMessage | string | — | Its mere presence forces the error state, regardless of variantColor/customColor |
| leadingIcon / trailingIcon | ReactNode | — | Icon inside the field, on the left/right |
| mask | cpf | cnpj | cei | cep | phone | creditCard | cardExpiry | date | time | — | Formats the value automatically as the user types (controlled or not); onChange emits the already-masked string |
| (native) | InputHTMLAttributes<HTMLInputElement> | — | value, defaultValue, onChange, placeholder, disabled, type, aria-*, className, etc. |