// 02_FORM_CONTROLS
FORM TOGGLE Checkbox
Casilla de verificación cuadrada con marca geométrica [X] y descripción.
// VISTA PREVIA
> CHECKBOX FORM TOGGLE
// FRAMEWORK:
src/pages/checkbox-ejemplo.astro 01 ---
02 import Checkbox from '@/components/Checkbox.astro';
03 ---
04
05 <Checkbox label="Autenticación Cuántica" description="Requiere llave SSH ed25519 física" checked />
01 import React from 'react';
02
03 interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
04 label: string;
05 description?: string;
06 }
07
08 export const Checkbox: React.FC<CheckboxProps> = ({ label, description, ...props }) => (
09 <label className="flex items-start gap-3 cursor-pointer group font-mono text-xs select-none">
10 <input type="checkbox" className="peer sr-only" {...props} />
11 <div className="w-5 h-5 bg-white dark:bg-slate-900 border-2 border-black shadow-[-2px_2px_0px_0px_#000000] flex items-center justify-center peer-checked:bg-[#D62436] peer-checked:text-white transition-transform active:translate-x-0.5">
12 <span className="opacity-0 peer-checked:opacity-100 font-extrabold text-xs">X</span>
13 </div>
14 <div className="space-y-0.5">
15 <span className="block font-bold uppercase group-hover:text-[#D62436]">{label}</span>
16 {description && <span className="block text-[11px] text-slate-600 dark:text-slate-400">{description}</span>}
17 </div>
18 </label>
19 );
01 <!-- Ryukami Checkbox (HTML + Tailwind CSS v4) -->
02 <label class="flex items-start gap-3 cursor-pointer group font-mono text-xs select-none">
03 <input type="checkbox" class="peer sr-only" checked />
04 <div class="w-5 h-5 bg-white dark:bg-slate-900 border-2 border-black shadow-[-2px_2px_0px_0px_#000000] flex items-center justify-center peer-checked:bg-[#D62436] peer-checked:text-white transition-transform">
05 <span class="opacity-0 peer-checked:opacity-100 font-extrabold text-xs">X</span>
06 </div>
07 <div class="space-y-0.5">
08 <span class="block font-bold uppercase group-hover:text-[#D62436]">Autenticacion Cuantica</span>
09 <span class="block text-[11px] text-slate-600 dark:text-slate-400">Requiere llave SSH ed25519 fisica</span>
10 </div>
11 </label>
| Prop | Tipo TypeScript | Default | Descripción | Variantes |
|---|---|---|---|---|
| label (Checkbox) | string | undefined | Texto principal de la casilla de verificación. | — |
| checked (Checkbox) | boolean | false | Estado de selección inicial. | — |
| description (Checkbox) | string | '' | Texto aclaratorio o subtítulo bajo la casilla. | — |
| label (Switch) | string | undefined | Etiqueta del interruptor binario ON/OFF. | — |
| checked (Switch) | boolean | false | Estado inicial del interruptor mecánico. | — |
| name | string | '' | Nombre del campo para envío en formulario HTML. | — |
// INSTALACIÓN
Terminal // Bash BASH
ryukami-ui add checkbox
// CÓDIGO DE USO
src/pages/checkbox-demo.astro ASTRO
01 ---
02 import Checkbox from '@/components/Checkbox.astro';
03 ---
04
05 <Checkbox label="Autenticación Cuántica" description="Requiere llave SSH ed25519 física" checked />
src/components/Checkbox.tsx TSX // REACT
01 import React from 'react';
02
03 interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
04 label: string;
05 description?: string;
06 }
07
08 export const Checkbox: React.FC<CheckboxProps> = ({ label, description, ...props }) => (
09 <label className="flex items-start gap-3 cursor-pointer group font-mono text-xs select-none">
10 <input type="checkbox" className="peer sr-only" {...props} />
11 <div className="w-5 h-5 bg-white dark:bg-slate-900 border-2 border-black shadow-[-2px_2px_0px_0px_#000000] flex items-center justify-center peer-checked:bg-[#D62436] peer-checked:text-white transition-transform active:translate-x-0.5">
12 <span className="opacity-0 peer-checked:opacity-100 font-extrabold text-xs">X</span>
13 </div>
14 <div className="space-y-0.5">
15 <span className="block font-bold uppercase group-hover:text-[#D62436]">{label}</span>
16 {description && <span className="block text-[11px] text-slate-600 dark:text-slate-400">{description}</span>}
17 </div>
18 </label>
19 );
public/checkbox-snippet.html HTML // TAILWIND
01 <!-- Ryukami Checkbox (HTML + Tailwind CSS v4) -->
02 <label class="flex items-start gap-3 cursor-pointer group font-mono text-xs select-none">
03 <input type="checkbox" class="peer sr-only" checked />
04 <div class="w-5 h-5 bg-white dark:bg-slate-900 border-2 border-black shadow-[-2px_2px_0px_0px_#000000] flex items-center justify-center peer-checked:bg-[#D62436] peer-checked:text-white transition-transform">
05 <span class="opacity-0 peer-checked:opacity-100 font-extrabold text-xs">X</span>
06 </div>
07 <div class="space-y-0.5">
08 <span class="block font-bold uppercase group-hover:text-[#D62436]">Autenticacion Cuantica</span>
09 <span class="block text-[11px] text-slate-600 dark:text-slate-400">Requiere llave SSH ed25519 fisica</span>
10 </div>
11 </label>