componentes / switch

Switch

Interruptor encendido/apagado con role="switch", etiqueta, texto de ayuda y de error y colores.

Cómo usar

Un checkbox nativo expuesto como `role="switch"`, así que funciona en formularios, con `ref` y teclado (Espacio). Úsalo para ajustes que se aplican al instante; usa `Checkbox` para elecciones que se envían después.

preview

Wi-Fi

NotificacionesEnviadas por correo

Switch.tsx

import { Switch } from "vaiperui";
 
<Switch label="Wi-Fi" />
<Switch
  defaultChecked
  variantColor="success"
  label="Notificaciones"
  helperText="Enviadas por correo"
/>

Colores

preview

primary

success

warning

danger

colores.tsx

<Switch defaultChecked variantColor="primary" label="primary" />
<Switch defaultChecked variantColor="success" label="success" />
<Switch defaultChecked variantColor="warning" label="warning" />
<Switch defaultChecked variantColor="danger" label="danger" />

Tamaños

preview

tamanos.tsx

<Switch defaultChecked size="sm" label="sm" />
<Switch defaultChecked size="md" label="md" />
<Switch defaultChecked size="lg" label="lg" />

Estados

preview

ayudaDetalle extra

ayuda

errorEsto es obligatorio

error

deshabilitado

deshabilitado ✓

estados.tsx

<Switch label="ayuda" helperText="..." />
<Switch label="error" errorMessage="..." />
<Switch label="deshabilitado" disabled />
<Switch label="deshabilitado" disabled defaultChecked />

Color personalizado

`customColor` acepta cualquier color CSS, o un par `{ light, dark }`.

preview

Naranja

Violeta

color-personalizado.tsx

<Switch defaultChecked customColor="#ff6600" label="Naranja" />
<Switch defaultChecked customColor={{ light: "#7c3aed", dark: "#a78bfa" }} label="Violeta" />

Props

Prop	Valores	Predeterminado	Descripción
variantColor	primary \| success \| warning \| danger	primary	Color del estado marcado y del anillo de foco
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema). Reemplaza a variantColor
size	sm \| md \| lg	md	Tamaño del control y del texto
animation	none \| smooth \| fast \| bounce	smooth	Transición al alternar
label	ReactNode	ninguno	Texto junto al control; al hacer clic se alterna
helperText	string	ninguno	Línea secundaria bajo la etiqueta
errorMessage	string	ninguno	Texto de error; su sola presencia fuerza el estado de error
(nativas)	InputHTMLAttributes<HTMLInputElement>	ninguno	checked, defaultChecked, onChange, name, value, disabled, required, aria-*, className, ref, etc.

Accesibilidad

Renderiza un `<input type="checkbox" role="switch">` nativo (oculto visualmente), así que Space lo alterna y el estado marcado se expone de forma nativa.
El `<label>` envuelve el input, así que el texto de la etiqueta nombra al switch y toda la fila es clicable.
`errorMessage` define `aria-invalid="true"`; `aria-describedby` apunta al error, o al `helperText` si no hay error.
`disabled` es el atributo nativo: el switch sale del orden de Tab y la fila se atenúa.
La pista y el thumb son `aria-hidden`; el estado encendido/apagado no depende solo del color para las tecnologías asistivas.

Teclado

Tecla	Acción
Space	Alterna el switch.

Ten en cuenta

Sin `label`, pasa `aria-label`; el control no tiene otro nombre.
Úsalo para ajustes que se aplican al instante; para opciones enviadas luego en un formulario, prefiere `Checkbox`.