PrimitiveDisponible

Switch

Ajuste binario inmediato con estado activado o desactivado.

Autosave on

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/switch.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { useState } from 'react';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';

export default function Demo() {
  const [enabled, setEnabled] = useState(true);
  return (
    <div className="flex items-center gap-3">
      <Switch id="auto-save" checked={enabled} onCheckedChange={setEnabled} />
      <Label htmlFor="auto-save">Autosave {enabled ? 'on' : 'off'}</Label>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

SeleccionadoSin seleccionarDeshabilitado

Documenta el valor inicial, seleccionado, deshabilitado y foco. La selección cambia el indicador o la posición, además del color.
Usa Espacio para activar botones de selección; las flechas cambian radios y sliders. Checkbox admite un estado mixto.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
checked	boolean	uncontrolled	Current setting.
onCheckedChange	function	—	Reports the new setting.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.