Input
Un componente de entrada de texto moderno con efectos de foco y múltiples variantes de estilo.
import { Input } from "stofli-ui";Ejemplos básicos para diferentes usos.
Usando la prop size: sm, md y lg.
Usando la prop variant: default, primary, secondary, success, warning y danger.
Añade íconos al inicio o final del input para mejorar la experiencia visual.
El componente Input incluye validación automática para tipos específicos como email y url, además de mostrar mensajes de error y éxito.
Controla manualmente los estados de error y éxito con las props error y success.
Usa la prop pattern para validar el input con expresiones regulares personalizadas.
Usando la prop radius: none, sm, md y full.
Utilizando la prop fullWidth para que el input ocupe todo el ancho disponible.
Ejemplo de un formulario de contacto con validación integrada.
El componente Input soporta validación mediante reglas predefinidas en formato de cadena de texto, lo que evita problemas de serialización en componentes cliente.
Puedes personalizar cualquier parte del componente usando las propiedades de className con clases de Tailwind CSS.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
label | string | - | Etiqueta para el campo de entrada |
placeholder | string | "" | Texto de marcador de posición |
type | string | "text" | Tipo de input (text, password, email, etc.) |
defaultValue | string | "" | Valor por defecto para inputs no controlados. No debe usarse junto con value |
value | string | - | Valor controlado del input. No debe usarse junto con defaultValue |
name | string | - | Nombre del campo para formularios |
id | string | - | ID del elemento input |
disabled | boolean | false | Deshabilita el input |
required | boolean | false | Marca el campo como requerido |
error | string | - | Mensaje de error para mostrar |
success | boolean | false | Indica si el campo tiene un valor válido |
pattern | string | - | Patrón de expresión regular para validación |
validate | string | ((value: string) => string | undefined) | - | Regla de validación predefinida o función personalizada. Las reglas disponibles son: "email", "url", "min:N" donde N es el número mínimo de caracteres |
successMessage | string | - | Mensaje a mostrar cuando el input es válido |
icon | ReactNode | - | Ícono para mostrar junto al input |
iconPosition | "left" | "right" | "left" | Posición del ícono |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de estilo |
size | "sm" | "md" | "lg" | "md" | Tamaño del input |
radius | "none" | "sm" | "md" | "full" | "md" | Radio de las esquinas |
fullWidth | boolean | false | Hace que el input ocupe todo el ancho disponible |
className | string | - | Clases adicionales para el contenedor |
inputClassName | string | - | Clases adicionales para el elemento input |
labelClassName | string | - | Clases adicionales para la etiqueta |
onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | - | Función llamada al cambiar el valor |
onFocus | (e: React.FocusEvent<HTMLInputElement>) => void | - | Función llamada al enfocar el input |
onBlur | (e: React.FocusEvent<HTMLInputElement>) => void | - | Función llamada al perder el foco |
aria-label | string | - | Etiqueta ARIA personalizada |
aria-describedby | string | - | ID del elemento que describe el input |
description | string | - | Texto descriptivo para el input |
errorId | string | - | ID personalizado para el mensaje de error |
descriptionId | string | - | ID personalizado para la descripción |
hideLabel | boolean | false | Oculta visualmente la etiqueta pero la mantiene accesible para lectores de pantalla |
autoComplete | string | - | Valor para el atributo autoComplete del input |
readOnly | boolean | false | Establece el input en modo solo lectura |