Input

Campo de texto con label integrado, texto de ayuda y mensajes de error/éxito. forwardRef compatible. Extiende todos los atributos nativos de input.

pnpm dlx nuvo-ui add input

Variantes

Nunca compartiremos tu email.

Contraseña segura

// Default con texto de ayuda
<Input
  label="Email"
  type="email"
  placeholder="tu@empresa.com"
  helperText="Nunca compartiremos tu email."
/>

// Éxito
<Input label="Email" variant="success" helperText="Email verificado" />

// Error
<Input
  label="Email"
  variant="error"
  errorMessage="El email no es válido."
/>

Controlado

Escribe para buscar

const [value, setValue] = React.useState("")

<Input
  label="Buscar"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  helperText={value ? `Buscando: "${value}"` : "Escribe para buscar"}
/>

Props

PropTipoDefaultDescripción
labelstring—Etiqueta del campo
helperTextstring—Texto descriptivo bajo el input
errorMessagestring—Error (sobreescribe helperText y fuerza variant=error)
variant"default" | "error" | "success""default"Estado visual del campo
...InputHTMLAttributes—Todos los atributos nativos de <input>