Input

Campo de texto con label, hint y error integrados. Accesible por defecto.

---

Import

import { Input } from '@imansi/ui';

---

Uso básico

<Input placeholder="Escribí tu email" />

---

Con label

<Input
  label="Email"
  type="email"
  placeholder="correo@ejemplo.com"
/>

El label se asocia automáticamente al input con htmlFor / id.

---

Con hint (texto de ayuda)

<Input
  label="Contraseña"
  type="password"
  hint="Debe tener al menos 8 caracteres"
/>

---

Con error

<Input
  label="Email"
  type="email"
  error="El correo no es válido"
/>

Cuando hay error, el borde se pinta en rojo y se muestra el mensaje abajo.

---

Estados

Deshabilitado

<Input label="Email" disabled value="usuario@ejemplo.com" />

Readonly

<Input label="ID" readOnly value="usr_abc123" />

---

Con íconos

import { Mail, Search } from 'lucide-react';

<div className="relative">
  <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
  <Input placeholder="correo@ejemplo.com" className="pl-10" />
</div>

---

Tipos soportados

Input pasa el type nativo directamente al <input>:

<Input type="text" />
<Input type="email" />
<Input type="password" />
<Input type="number" />
<Input type="tel" />
<Input type="url" />
<Input type="search" />
<Input type="date" />
<Input type="time" />
<Input type="file" />

---

Props

Prop	Tipo	Default	Descripción
label	string	—	Etiqueta del campo
hint	string	—	Texto de ayuda debajo del campo
error	string	—	Mensaje de error (pinta el campo en rojo)
id	string	autogenerado	ID del input (se autogenera si no lo pasás)
type	string	'text'	Tipo nativo de <input>
disabled	boolean	false	Deshabilita el campo
readOnly	boolean	false	Solo lectura
className	string	—	Clases adicionales
...props	InputHTMLAttributes	—	Todas las props nativas de <input>

---

Accesibilidad

• aria-invalid se aplica automáticamente cuando hay error
• aria-describedby conecta el input con hint y error
• Focus visible con ring
• Compatible con navegación por teclado

<Input
  label="Email"
  type="email"
  hint="Nunca compartas tu correo"
  error={errors.email}
/>

---

Ejemplo completo

import { useState } from 'react';
import { Input, Button } from '@imansi/ui';

export function FormularioLogin() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  function handleSubmit(e) {
    e.preventDefault();
    const nuevosErrores = {};

    if (!email.includes('@')) {
      nuevosErrores.email = 'Email inválido';
    }
    if (password.length < 8) {
      nuevosErrores.password = 'Mínimo 8 caracteres';
    }

    setErrors(nuevosErrores);

    if (Object.keys(nuevosErrores).length === 0) {
      // enviar formulario
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-sm">
      <Input
        label="Email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        error={errors.email}
        hint="Usá tu correo principal"
      />

      <Input
        label="Contraseña"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        error={errors.password}
      />

      <Button type="submit" className="w-full">
        Iniciar sesión
      </Button>
    </form>
  );
}