INDEX // EXPLORER 35 MODS

// 00_GETTING_STARTED

> Introducción
> Instalador CLI
> Servidor MCP (IA)

// 01_CORE UI & TELEMETRY

> Button
> Badge
> Card (TUI Window)
> Kbd
> ProgressBar
> Avatar
> Skeleton
> StatCard v2.4
> Tooltip

// 02_FORM CONTROLS

> Input
> Textarea
> Select
> Slider
> RadioGroup
> Checkbox
> Switch

// 03_LAYOUT & MODALS

> Tabs
> Accordion
> Breadcrumb
> Pagination
> Popover
> Alert
> Callout
> Modal
> Drawer v2.4
> ToastContainer
> CommandPalette
> BentoGrid v2.4

// 04_SCORCH STUDIO

> DataTable v2.4
> CodeBlock
> AudioSynth
> TerminalEmulator
> ComponentPreview
> ThemeStudio
> AsciiGenerator

home / docs / Switch

// 02_FORM_CONTROLS

SLIDE SWITCH

Switch

Interruptor táctil deslizante (role="switch") con variantes crimson, cyan y gold.

// VISTA PREVIA

> SWITCH SLIDE SWITCH

Vigilancia RF Activa

Sintetizador Web Audio

Modo Nocturno CRT

// FRAMEWORK:

src/pages/switch-ejemplo.astro

01 ---

02 import Switch from '@/components/Switch.astro';

03 ---

05 <Switch label="Vigilancia RF Activa" variant="crimson" checked />

01 import React, { useState } from 'react';

03 interface SwitchProps {

04 label: string;

05 checked?: boolean;

06 onChange?: (checked: boolean) => void;

07 }

09 export const Switch: React.FC<SwitchProps> = ({ label, checked: initial = false, onChange }) => {

10 const [checked, setChecked] = useState(initial);

11 const toggle = () => {

12 const next = !checked;

13 setChecked(next);

14 onChange?.(next);

15 };

17 return (

18 <label className="flex items-center gap-3 cursor-pointer select-none font-mono text-xs" onClick={toggle}>

19 <div className={`w-12 h-6 border-2 border-black p-0.5 transition-colors ${checked ? 'bg-[#D62436]' : 'bg-slate-200 dark:bg-slate-800'}`}>

20 <div className={`w-4 h-4 bg-white border border-black transition-transform ${checked ? 'translate-x-6' : 'translate-x-0'}`} />

21 </div>

22 <span className="font-bold uppercase">{label}</span>

23 </label>

24 );

25 };

01

02 <label class="flex items-center gap-3 cursor-pointer select-none font-mono text-xs">

03 <input type="checkbox" class="peer sr-only" checked />

04 <div class="w-12 h-6 border-2 border-black p-0.5 bg-slate-200 dark:bg-slate-800 peer-checked:bg-[#D62436] transition-colors">

05 <div class="w-4 h-4 bg-white border border-black peer-checked:translate-x-6 transition-transform"></div>

06 </div>

07 <span class="font-bold uppercase">Vigilancia RF Activa</span>

08 </label>

// INSTALACIÓN

Terminal // Bash BASH

ryukami-ui add switch

// CÓDIGO DE USO

src/pages/switch-demo.astro ASTRO