Input
Campo de entrada de texto. El sistema define 3 tipos principales: Text (campo estándar),OTP (código de 6 dígitos) y Textarea (texto largo). 25 variantes en Figma (node 40000831:22047) incluyendo con/sin ícono, con/sin label y todos los estados.
Tipo: Text
Ingresa un correo electrónico válido
Tipo: OTP
Ingresa el código de 6 dígitos enviado a tu número
Cada dígito es un campo independiente con navegación automática al completar
Tipo: Textarea
El cliente no estaba presente al momento de la visita. Se dejó tarjeta de contacto en el buzón.
Estados
Default
Campo vacío en reposo
Focused
Campo activo — borde azul focus + ring de foco
Filled
Con valor válido — ícono check verde opcional
Error
Validación fallida — borde rojo + ícono error + hint rojo
Disabled
No interactuable — fondo gris, opacidad reducida
Anatomía
Label
Texto descriptivo sobre el campo — font: label-bold 14px
Container
Altura 48px · border-radius 12px · border 2px
Leading icon
Opcional — 18×18px · alineado verticalmente al centro
Placeholder / Value
font: body-medium 16px — placeholder gris, value negro
Trailing icon
Opcional — estado (check, error, clear) o acción (eye para password)
Helper text
12px · gris en default, rojo en error — hint o mensaje de validación
Reglas de uso
Incluye siempre una label visible sobre el campo
Usa hint text para explicar el formato esperado
Muestra errores inline justo debajo del campo afectado
Usa OTP solo para códigos de verificación de longitud fija
Usa Textarea cuando el texto pueda superar 80 caracteres
No uses placeholder como sustituto de la label — desaparece al escribir
No pongas múltiples campos en una sola línea en mobile
No uses un campo de texto para seleccionar de una lista corta — usa Select
No truncues el mensaje de error — debe ser legible completo
Accesibilidad
<label for="id">Siempre asociar label con input por atributo for/id
aria-required="true"Campos obligatorios — no uses solo * rojo
aria-invalid="true"En estado error
aria-describedbyID del hint text o mensaje de error
autocompleteValores estándar: name, email, tel, one-time-code (OTP)
Props API
interface InputProps {
type?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'otp' | 'textarea'
label: string // Requerido
placeholder?: string
value?: string
defaultValue?: string
disabled?: boolean
error?: string // Mensaje de error (activa estado error)
hint?: string // Helper text en estado normal
leadingIcon?: ReactNode
trailingIcon?: ReactNode
maxLength?: number // Para textarea — muestra contador
onChange?: (value: string) => void
// OTP específico
otpLength?: number // default: 6
onOTPComplete?: (code: string) => void
}