Switch
Interruptor de efecto inmediato: activa o apaga algo sin botón de guardar.
Usar
import { Switch } from "@unozero-ai/ui/react";
<Switch></Switch>Configurador
Cambia las propiedades y mira el componente y su código al mismo tiempo.
<Switch label="Respuesta automática" />Efecto inmediato
El Switch aplica el cambio al pulsarlo: no hay botón «Guardar» detrás. Úsalo para encender o apagar algo que ya existe, como el agente de un canal. Si el valor se envía junto con otros campos de un formulario, o si el cambio necesita confirmación, usa Checkbox y un botón de guardar. En React, onChange llega al pulsarlo y e.target.checked trae el estado nuevo; onCheckedChange ya no existe.
Con etiqueta y descripción
label nombra lo que se enciende y description cuenta qué pasa cuando está activo; si necesitan marcado, van por el slot por defecto y el slot description. Toda la fila es pulsable. Escribe la etiqueta en positivo («Reserva nueva»), nunca como negación («No avisarme»). checked fija el estado inicial y el interruptor guarda el suyo; con name, envía su value ("on") cuando está activo, como un checkbox.
Tamaños
md en páginas de ajustes; sm en filas densas, tablas y paneles laterales, donde el interruptor acompaña a otro contenido.
Deshabilitado
Un Switch deshabilitado tiene que decir por qué en su description, y qué hacer para activarlo si se puede. Si la opción no aplica nunca a este hotel, no la muestres.
En una fila de lista
Cuando la fila ya nombra lo que se activa, el Switch va en el slot trailing sin label, pero sigue necesitando un nombre: sin él, un lector de pantalla anuncia un interruptor sin nombre. uz-switch todavía no pasa aria-label al botón interno, así que dale el nombre con un texto oculto en su slot (<span className="sr-only">). El estado se lee por la posición del pulgar, no solo por el color (la Regla del Tenant).
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).