wiki-Input

Ver en Git

---

Input

El componente Input es un campo de entrada altamente personalizable que admite varias configuraciones y extensiones, como un área de texto (textarea) y elementos adicionales antes (addonBefore) o después (addonAfter) del campo.

Referencia de la API

Propiedad	Tipo	Descripción	Valor por defecto
value	string | number	Valor del campo de entrada.	-
type	string	Tipo del campo (text, password, etc.).	'text'
className	string	Clase CSS para el contenedor principal.	''
inputClassName	string	Clase CSS para el campo de entrada.	''
name	string	Nombre del campo de entrada.	-
onClick	(event: React.MouseEvent<HTMLInputElement>) => void	Función que se ejecuta al hacer clic en el campo.	-
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	Función que se ejecuta al cambiar el valor del campo.	-
onPressEnter	(event: React.KeyboardEvent<HTMLInputElement>) => void	Función que se ejecuta al presionar la tecla Enter.	-
regex	RegExp	Expresión regular para validar el valor del campo.	-
title	string	Título o etiqueta asociada al campo de entrada.	-
placeholder	string	Texto de marcador de posición.	-
extraStyles	CSSProperties	Estilos adicionales para el campo de entrada.	-
required	boolean	Indica si el campo es obligatorio.	false
disabled	boolean	Indica si el campo está deshabilitado.	false
loading	boolean	Indica si el campo está en estado de carga.	false
textarea	boolean	Si es true, el campo se renderiza como un área de texto.	false
addonBefore	ReactNode	Elemento a mostrar antes del campo de entrada.	-
addonAfter	ReactNode	Elemento a mostrar después del campo de entrada.	-
aura-test	string	Identificador para pruebas automatizadas.	'input'

Ejemplo de Uso

import { useState } from 'react';
import { Input } from '@auravant/ui-kit';

export const InputExample = () => {
 const [value, setValue] = useState('');

 return (
 <Input
 value={value}
 onChange={(e) => setValue(e.target.value)}
 placeholder="Escribe algo..."
 title="Campo de texto"
 required
 addonBefore={<span>@</span>}
 addonAfter={<button>Enviar</button>}
 />
 );
};

Notas

• Si se define la propiedad regex, el campo validará automáticamente el valor ingresado y aplicará un estilo específico (styles.unvalidated) si la validación falla.

• El componente incluye soporte para áreas de texto con la propiedad textarea. Al activarla, el campo cambiará automáticamente su estilo y comportamiento.