Switch
Un componente de interruptor elegante y animado para alternar entre dos estados.
Cargando...
import { Switch } from "stofli-ui";Cargando...
Un switch básico con animaciones fluidas para alternar entre estados.
Cargando...
Cargando...
El switch puede incluir una etiqueta descriptiva a la izquierda o derecha.
Cargando...
Cargando...
El switch está disponible en diferentes variantes de color.
Cargando...
Cargando...
El switch está disponible en tres tamaños: sm, md y lg.
Cargando...
Cargando...
El switch puede mostrar iconos dentro del círculo para indicar el estado actual.
Cargando...
Cargando...
El switch puede marcarse como requerido, mostrando un asterisco junto a la etiqueta.
Cargando...
Cargando...
Un switch deshabilitado que no permite interacción.
Cargando...
Cargando...
Un ejemplo de cómo usar el switch de forma controlada.
Cargando...
Cargando...
Puedes personalizar cualquier parte del componente usando las propiedades de clases personalizadas con Tailwind CSS.
Cargando...
Cargando...
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
checked | boolean | false | Estado del switch |
onChange | (checked: boolean) => void | - | Función a ejecutar cuando cambia el estado |
disabled | boolean | false | Deshabilita el switch |
size | "sm" | "md" | "lg" | "md" | Tamaño del switch |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de color |
label | string | - | Etiqueta descriptiva |
labelPosition | "left" | "right" | "right" | Posición de la etiqueta |
required | boolean | false | Indica si el switch es obligatorio |
name | string | - | Nombre del input para formularios |
id | string | - | ID único (se genera uno automáticamente si no se proporciona) |
ariaLabel | string | - | Etiqueta ARIA personalizada cuando no hay label visible |
description | string | - | Descripción accesible adicional (solo visible para lectores) |
descriptionId | string | - | ID personalizado para el elemento de descripción |
className | string | - | Clases adicionales para el componente principal |
circleClassName | string | - | Clases adicionales para el círculo del switch (ambos estados) |
activeCircleClassName | string | - | Clases adicionales para el círculo en estado activo |
inactiveCircleClassName | string | - | Clases adicionales para el círculo en estado inactivo |
labelClassName | string | - | Clases adicionales para la etiqueta |
wrapperClassName | string | - | Clases adicionales para el contenedor del switch (ambos estados) |
activeWrapperClassName | string | - | Clases adicionales para el contenedor en estado activo |
inactiveWrapperClassName | string | - | Clases adicionales para el contenedor en estado inactivo |
iconClassName | string | - | Clases adicionales para el icono del switch |
icon | boolean | false | Muestra un icono dentro del círculo |
iconType | "check" | "cross" | "none" | "check" | Tipo de icono a mostrar |