wiki-Switch

Ver en Git

---

Switch

El componente Switch es un interruptor interactivo personalizable que permite gestionar estados binarios (encendido/apagado). Incluye opciones para manejar eventos, estilos y estados de habilitación.

Referencia de la API

Propiedad	Tipo	Descripción	Valor por defecto
checked	boolean	Define si el switch está activado.	undefined
defaultChecked	boolean	Estado inicial del switch.	undefined
disabled	boolean	Desactiva la interacción con el switch.	undefined
size	'small' | 'normal'	Tamaño del switch.	'normal'
name	string	Nombre del switch, útil para formularios.	undefined
id	string	ID único del switch.	undefined
className	string	Clase CSS personalizada para el contenedor del switch.	undefined
onChange	(checked: boolean, event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void	Callback que se ejecuta cuando cambia el estado del switch.	undefined
onClick	(checked: boolean, event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void	Callback que se ejecuta al hacer clic en el switch.	undefined
aura-test	string	Identificador para pruebas automatizadas.	'switch'
sameColor	boolean	Aplica el mismo color para los estados activado y desactivado.	undefined

Ejemplo de uso

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

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

 const handleSwitchChange = (checked: boolean) => {
 console.log(`Switch is now ${checked ? 'ON' : 'OFF'}`);
 setIsChecked(checked);
 };

 return (
 <Switch
 checked={isChecked}
 onChange={handleSwitchChange}
 size="normal"
 name="example-switch"
 id="exampleSwitch"
 className="custom-switch"
 aura-test="example-test"
 />
 );
};