Selección de controles: checkbox, switch, radiocopiadora

1) Diferencias clave (significado, no «dibujo»)

• Necesito uno de N - tomar la radio.
• Necesitas cualquier conjunto de banderas - casillas de verificación.
• Se necesita un tumbler binario que cambie el comportamiento inmediatamente - un switch.

2) Árbol de decisiones (corto)

1. ¿Unas elecciones independientes? → Checkboxes.
2. ¿Exactamente una variante del conjunto? → Radiocomunicaciones (o segmento-control/tegles).
3. Una bandera binaria, el efecto es instantáneo y notable? → Switch.
4. ¿Necesita una marca «parcial» (subconjunto)? → Checkbox con tri-state.
5. El riesgo/costo es alto (pago, moderación)? → Radio/cheques + confirmación (no switch).

3) Comportamiento y expectativas del usuario

Sweet = resultado instantáneo. Después de cambiar, el usuario espera un efecto inmediato y reversibilidad sin «Guardar» individual.
Checkbox = selección de opciones. Puede aplicarse inmediatamente o con un botón: es importante mostrar explícitamente el modelo («Ajustes guardados »/« Haga clic en Guardar»).
Radio = selección de modo. La transición puede reconstruir la interfaz. Señalice los cambios (micro animación/texto).

4) Estados y semántica visual

Normal / Hover / Focus / Active / Disabled / Error. Contraste de texto e indicadores ≥ AA.
Tri-state (checkbox): vacío/parcial/seleccionado. El estado parcial no es licuado en sí mismo - el clic cambia a «seleccionado» en lugar de «vacío».
Sweet: tiene una clara distinción de «encendido/apagado» por el color y la posición del «runner». El color no es el único portador de significado (icono/etiqueta cercana).

5) Copyright y firmas

Verbo + objeto o afirmación que se convierte en verdad cuando se selecciona.

Checkbox: «Recibir notificaciones por correo electrónico».
Sweet: «Notificaciones: Encendido/Apagado» (etiqueta a la izquierda, estado a la derecha o en el propio switch).
Radio: «Formato de coeficientes: Decimal/Fraccionario/Americano».
Evitar las dobles negaciones: «No desconectar...» - confuso.

Para actividades de riesgo, agregue una descripción secundaria: "On. apuestas rápidas (sin confirmación): se puede cancelar dentro de 5 segundos"

6) Disponibilidad (A11y) y teclado

Checkbox: 'role = «checkbox»', 'aria-checked =' true 'false' mixed '', Space - switch.
Sweet: nativo '<input type = «checkbox»>' con visual sweet o 'role = «switch»' con 'aria-checked'. Comportamiento como el de la caja de verificación (Space).
Radio: 'role =' radiogroup '' en el contenedor, 'role =' radio 'en los elementos, flechas ↑/↓ o ←/→ - mover la selección, Space/Enter - confirman.
Grupos: utilice 'fieldset '/' legend' para el contexto general.
Los anillos de enfoque se dejan visibles; las dimensiones de las zonas de clic ≥ 44 × 44 px por tach.

html
<! -- Radio Group -->
<fieldset role="radiogroup" aria-labelledby="odds-format">
<legend id = "odds-format "> Odds format </legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичный</label>
<label><input type="radio" name="odds" value="fractional"> Дробный</label>
<label> <input type = "radio" name = "odds" value = "american"> American </label>
</fieldset>

<! -- Checkbox (tri-state via aria) -->
<div role = "checkbox" aria-checked =" mixed" tabindex =" 0" id = "cb "> Notify about tournaments </div>

<! -- Switch (role = "switch") -->
<button role="switch" aria-checked="false" aria-labelledby="live-title" class="switch" id="live">
<span class="switch__knob"></span>
</button>
<span id = "live-title "> Live updates </span>

7) Cambios y errores asíncronos

Sweet + Network: conmutar → una IU optimista a la vez → confirmar el servidor → al fallar, retroceder suavemente y mostrar la razón.
Checkbox/radio en «Guardar»: hasta que no haya confirmación - no cambie el comportamiento global.
Acciones arriesgadas: confirmación (modalka) o panel undo durante 5-10 segundos (si el reglamento lo permite).

js
//Optimistic for switch const sw = document. getElementById('live');
sw. addEventListener('click', async ()=>{
const prev = sw. getAttribute('aria-checked') === 'true';
sw. setAttribute ('aria-checked', String (! prev)) ;//instantly try {
const r = await fetch('/api/live', { method:'POST', body: JSON. stringify({ enabled:!prev })});
if(!r.ok) throw new Error();
} catch {
sw. setAttribute('aria-checked', String(prev));     // откат
//show the toast "Failed to enable live"
}
});

8) Patrones móviles

El switch es el control binario principal en la configuración en los móviles.
La radio puede ser reemplazada por el control segmented para 2-4 opciones (mejor golpear con el dedo).
Checkbooks en las listas - con un área de clic grande y soporte de multi-juego rápido.

9) Patrones de agrupación y diseño

Radio: lista vertical (mejor escaneado), para 2-3 variantes - segmentos en una línea.
Casillas de verificación: alineación de una columna; para listas largas - «Seleccionar todas» + tri-estado en el grupo.
Sweet: etiqueta a la izquierda, control a la derecha en una línea; muestre el estado actual con texto si es necesario (Activado/Desactivado).

10) Antipattern

Sweet que no aplica cambios de inmediato (requiere «Guardar»).
Ventanas de radio donde las opciones múltiples son posibles.
Checkbox para las opciones mutuamente excluyentes («Hombre/Mujer» como dos checkbox).
Sweet binario para una acción irreversible peligrosa (eliminar datos).
Dos negaciones en el texto.
Cambiar el diseño en caso de error para que se pierda el enfoque.

11) Especificidad de iGaming (ejemplos)

Formato de coeficiente: grupo de radio «Decimal/Fraccionario/Americano» - aplicado inmediatamente y almacenado en el perfil.
Apuesta rápida: Sweet «Apuestas rápidas (sin confirmación)» con una descripción explícita y undo durante 5-10 segundos después de cada operación.
Suscripciones/notificaciones: cheques por tipo de evento (ganancias, torneos, depósitos). La casilla de verificación de grupo «Seleccionar todo» es tri-state.
Actualizaciones de coeficientes en vivo: Sweet «Live-mode» con optimismo y retroceso en caso de error de red.
Límites del juego responsable: números de radio para períodos (día/semana/mes) + margen de suma; confirmación del límite modificado con la entrada «a partir de mañana».

12) Tokens del sistema de diseño (ejemplo)

json
{
"checkbox": { "size": 20, "radius": 4, "gap": 8 },
"radio": { "size": 20, "dot": 10, "gap": 8 },
"switch": { "width": 44, "height": 24, "knob": 20, "padding": 2 },
"focusRing": { "width": 2, "offset": 2 },
"motion": { "toggleMs": 140, "ease": "cubic-bezier(0. 2,0,0. 2,1)" },
"a11y": { "contrastAA": true }
}

css
.control { display:flex; align-items:center; gap:8px; min-height:36px; }
.switch { width:44px; height:24px; padding:2px; border-radius:999px; background:var(--bg-muted); position:relative; }
.switch[aria-checked="true"]{ background:var(--accent); }
.switch__knob{ position:absolute; width:20px; height:20px; border-radius:50%; left:2px; top:2px; transition: transform. 14s cubic-bezier(.2,0,.2,1); background:#fff; }
.switch[aria-checked="true"].switch__knob{ transform: translateX(20px); }
.control:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

13) Snippets de lógica UX

js function updateMaster(master, items){
const total = items. length, checked = items. filter(i=>i. checked). length;
master. indeterminate = checked>0 && checked<total;
master. checked = checked===total;
}

js const radios = [...document. querySelectorAll('[role="radio"]')];
let i = radios. findIndex(r => r. getAttribute('aria-checked')==='true');
document. addEventListener('keydown', e => {
if(!['ArrowRight','ArrowDown','ArrowLeft','ArrowUp'].includes(e. key)) return;
e. preventDefault();
const dir = (e. key==='ArrowRight'          e. key==='ArrowDown')? 1: -1;
i = (i + dir + radios. length) % radios. length;
radios. forEach(r => r. setAttribute('aria-checked','false'));
radios[i].setAttribute('aria-checked','true');
radios[i].focus();
});

14) Métricas y experimentos

Misclick rate y undo-frecuencia a través de los suéteres.
Tiempo hasta la selección y error de validación por grupos de radio.
Compartir «Seleccionar todo» y comparar con la selección manual (velocidad, precisión).
A/B: redacción de etiquetas, orden de opciones, segmented vs radio, «aplicar inmediatamente» vs «en el botón».

15) QA-check-list

Significado y elección

• El control se ajusta a la tarea (caja de cheques múltiple →; una de radio N →; binario instantáneo → switch).
• Hay confirmación/undo para acciones de riesgo.

Disponibilidad

• Roles correctos ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' indeterminate'.
• Los anillos de enfoque son visibles, las flechas funcionan en el grupo de radio, Space cambia la caja de verificación/switch.

Comport

• Switch aplica los cambios inmediatamente; en caso de error - retroceso y mensaje.
• Tri-state en «Seleccionar todo» es correcto; los clics de la etiqueta funcionan.

Visual

• Contraste ≥ AA; el estado no se transmite sólo por el color.
• Zonas de clic ≥ 44 × 44 px; el orden y la alineación son estables.

Móviles

• Control segmented para 2-4 opciones de radio probado para el tach.
• Golpear con el dedo y desplazarse no entran en conflicto.

16) Documentación en el sistema de diseño

Componentes: 'Checkbox', 'Switch', 'RadioGroup '/' SegmentedControl'.
Tokens de tamaño/animación/enfoque, ejemplos de redacción.
Patrones: «Seleccionar todo» (tri-estado), «Aplicación instantánea», «Undo después del riesgo».
Do/Don 't-gallery: sweet de retención diferida (don' t), radio en lugar de checkbox (don 't), segmentos para conjuntos cortos (do).

Resumen breve

La elección del control es acerca del significado y las expectativas: la caja de verificación es banderas y grupos independientes, el switch es la función de encendido/apagado instantáneo, la radio es exactamente una opción del conjunto. Mantenga la disponibilidad, piense en los estados asíncronos y el copyright, y los usuarios cambiarán con confianza la configuración sin errores ni sorpresas.