wiki-Checkbox

Ver en Git

---

Checkbox

El componente Checkbox es utilizado para representar una casilla de verificación en la interfaz de usuario, permitiendo al usuario seleccionar o deseleccionar una opción.

Referencia de la API

Propiedad	Tipo	Predeterminado	Descripción
checked	boolean (opcional)	undefined	Determina si el checkbox está marcado (controlado).
defaultChecked	boolean (opcional)	undefined	El estado inicial del checkbox (no controlado).
disabled	boolean (opcional)	undefined	Si es true, el checkbox se deshabilita, impidiendo la interacción.
size	'small' | 'normal' (opcional)	'normal'	Define el tamaño del checkbox: 'small' o 'normal'.
name	string (opcional)	undefined	El atributo name del elemento checkbox.
id	string (opcional)	undefined	El atributo id para el checkbox, útil para accesibilidad.
className	string (opcional)	undefined	Clase personalizada para aplicar al contenedor del checkbox.
onChange	(checked: boolean, event: MouseEvent) => void (opcional)	undefined	Función de callback que se dispara cuando el estado del checkbox cambia, pasando el nuevo valor de checked y el evento del mouse.
onClick	(checked: boolean, event: MouseEvent) => void (opcional)	undefined	Función de callback que se dispara cuando se hace clic en el checkbox, pasando el valor actual de checked y el evento del mouse.
outlined	boolean (opcional)	undefined	Si es true, el checkbox tendrá un borde cuando esté marcado.
style	CSSProperties (opcional)	undefined	Estilos en línea para aplicar al contenedor del checkbox.
label	string (opcional)	undefined	Texto de la etiqueta que se muestra junto al checkbox.
aura-test	string (opcional)	'checkbox'	Identificador para pruebas automatizadas (por ejemplo, con herramientas como Cypress).

Ejemplo de Uso

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

export const CheckboxExample = () => {
 const [isChecked, setIsChecked] = useState(false);

 const handleChange = (checked: boolean) => {
 setIsChecked(checked);
 };

 return (
 <Checkbox
 checked={isChecked}
 onChange={handleChange}
 label='Aceptar términos y condiciones'
 size='normal'
 />
 );
};

Notas

• Controlado vs No Controlado: El componente Checkbox puede funcionar tanto en modo controlado como no controlado. Usá la prop checked para controlar el estado del checkbox externamente, o defaultChecked para un checkbox no controlado.

• Gestión de Estado: El componente utiliza el estado interno (state.checked) y la prop checked para alternar entre los estados marcado y desmarcado. Cuando se proporciona checked, el componente se convierte en controlado, de lo contrario, usa defaultChecked.

• Manejo de Eventos: Si se proporcionan los props onClick o onChange, se llamarán cuando el checkbox sea clickeado o su estado cambie. Ambos reciben el valor actualizado de checked y el evento del mouse.

• Accesibilidad: El componente incluye los props name, id y label para propósitos de accesibilidad. La etiqueta se muestra junto al checkbox y el id se puede usar para vincular la etiqueta con el input del checkbox.