Input
Campo de texto de una línea. Tres variantes visuales (outline, filled, flushed), tres tamaños y soporte de iconos leading/trailing, texto de ayuda y estado de error. Se integra con FormField para conectar label, hint y error de forma accesible.
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { Input } from "@tsukira/ui"; <Input label="Correo" type="email" placeholder="nombre@empresa.com" /><Input label="Contraseña" type="password" variant="filled" isInvalid errorText="La contraseña no es válida." />Ejemplos#
Playground
cambia las props y el código se regeneralabel
helperText
errorText
size
variant
isInvalid
Inactivo
fullWidth
Inactivo
floating
Inactivo
Variantes
outline · filled · flushedFloating Label
floating (etiqueta flotante animada al escribir)@
Tamaños
Con iconos
leadingIcon · trailingIcon@
€.00
Estados
helperText · isInvalid + errorText · disabledTe enviaremos un enlace de confirmación.
Mínimo 8 caracteres con una mayúscula.
Fusión: formulario de acceso
FormField + Input + Button¿Olvidaste tu contraseña?
Fusión: búsqueda con atajo de teclado y filtros activos
Input + Kbd + Chip de filtros⌕/
Filtros activos:ReactTypeScript
API#
InputPropsextends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label | string | — | — |
helperText | string | — | — |
errorText | string | — | — |
leadingIcon | ReactNode | — | — |
trailingIcon | ReactNode | — | — |
size | 'sm' | 'md' | 'lg' | — | — |
variant | 'outline' | 'filled' | 'flushed' | — | — |
isInvalid | boolean | — | — |
fullWidth | boolean | — | — |
floating | boolean | — | — |