Seleção de controladores: Checkbox, Switch, canal de rádio

1) Diferenças-chave (sentido, não «desenho»)

• Preciso de um N, pegue no rádio.
• Precisamos de todas as bandeiras.
• Preciso de um tumbler binário que mude o comportamento.

2) Árvore de soluções (curta)

1. Algumas eleições independentes?
2. É exatamente uma opção do conjunto? → de localização de rádio (ou segmento-controlador/marca).
3. Uma bandeira binária, efeito instantâneo e visível?
4. Preciso de um subconjunto «parcial»? → Checkbox com tri-state.
5. Risco/custo alto (pagamento, moderação)? → rádio/checkbox + confirmação (não swich).

3) Comportamento e expectativa do usuário

Switch = resultado instantâneo. Após alternar, o usuário espera um efeito imediato e reversível sem «Salvar» individualmente.
Checkbox = escolha de opções. Pode ser aplicado imediatamente ou por botão - é importante mostrar claramente o modelo (Configurações salvas/Clique em Salvar).
Rádio = escolha do modo. A transição pode remodelar a interface. Sinalize as alterações (microanimação/texto).

4) Estados e semântica visual

Normal / Hover / Focus / Active / Disabled / Error. Contraste entre texto e indicadores ≥ AA.
Tri-state (checkbox): vazio/parcial/selecionado. O estado parcial não é por si só - o clique é trocado por «escolhido» e não «vazio».
Switch: Tem uma clara distinção entre a cor e a posição da «jogadora». A cor não é o único hospedeiro de sentido (ícone/editora ao lado).

5) Copiar e assinar

Verbo + objeto ou afirmação que se torna verdadeiro quando selecionado.

«Receber notificações de e-mail».
Switch: «Notificações: Ativado/Desligado» (gravador à esquerda, estado à direita ou no pergaminho).
Rádio: «Formato de coeficientes: decimal/Fracionado/Americano».
Evite negar duplamente, «Não desligar...» é confuso.

Para ações de risco, adicione uma descrição secundária: apostas rápidas (sem confirmação) - pode ser cancelado em 5 segundos"

6) Disponibilidade (A11y) e teclado

Checkbox: 'role =' checkbox ',' aria-checked = 'true' falso 'mixed', 'Space' - Alternando.
Switch: nativo '<input tipo =' checkbox '>' com o visual do suingue ou 'role =' switch's 'aria-checked'. Comportamento como o Espaço.
Rádio: 'role =' radiogroup 'no contêiner,' role = 'radio' nos itens, seta ↑/↓ ou ←/→ - movendo a seleção, Space/Enter - confirmam.
Grupos: use 'fieldset '/' legend' para um contexto comum.
Deixe os anéis de foco visíveis; o tamanho da área do clique ≥ 44 x 44 px por caixa.

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) Alterações assincrônicas e erros

Switch + rede: Alterna → UI imediatamente otimista → confirmação do servidor → quando não estiver disponível, recuamos suavemente e mostramos o motivo.
Checkbox/rádio em «Salvar»: ainda não há confirmação - não mude o comportamento global.
Ações arriscadas: confirmação (modal) ou painel undo de 5 a 10 segundos (se o regulamento permitir).

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) Pattern móveis

O switch é o controle binário principal nas configurações móveis.
O rádio pode ser substituído pelo controle segmentado para 2-4 opções (melhor parar com o dedo).
Os checkbox nas listas são uma grande área de clique e suportam uma seleção rápida.

9) Grupos de pattern e layout

Rádio: lista vertical (melhor digitalizado) e segmentos em uma linha para 2-3 opções.
Checkbox: alinhamento por coluna; para listas longas - «Selecionar tudo» + tri-state no grupo.
Switch: editora à esquerda, controlador à direita na mesma linha; mostre o status atual com texto, se necessário (Ativado/Desinstalado).

10) Antipattern

Um switch que não aplica as alterações imediatamente (exige «Salvar»).
Um canal de rádio onde pode haver múltiplas escolhas.
Checkbox para opções de exclusão mútua («Masculino/Feminino» como dois checkbox).
Um suingue binário para uma ação irreversível perigosa (remover dados).
Duplas negações no texto.
Altera o layout quando o foco é perdido.

11) Especificidades de iGaming (exemplos)

Formato de coeficientes: radiogrupo «Decimais/Frações/Americanos» - aplicado imediatamente e salvo para o perfil.
Aposta rápida: «Apostas rápidas (sem confirmação)», com descrição explícita e undo de 5 a 10 segundos após cada operação.
Assinaturas/notificações: checkbox por tipo de evento (ganhos, torneios, depósitos). «Selecione tudo» - tri-state.
Atualizações de coeficientes ao vivo: Modo ao vivo com otimismo e retração com erro na rede.
Limites do jogo responsável: canal de rádio para períodos (dia/semana/mês) + campo de valor; confirmação do limite alterado com entrada «a partir de amanhã».

12) Sistema de design de tokens (exemplo)

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 UX-lógica

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 e experiências

Misclick rate e frequência undo por pergaminho.
Tempo até a seleção e erro de validação por grupo de rádio.
Proporção «Escolher tudo» e comparação com a escolha manual (velocidade, precisão).
A/B: Copiar editoras, ordem de opções, segmented vs radio, aplicar imediatamente «vs» no botão.

15) QA-folha de cheque

Sentido e escolha

• O controlador corresponde a uma tarefa (múltipla → de checkbox; um do rádio N; binário instantâneo → swich).
• Há confirmação/undo para ações de risco.

Disponibilidade

• Papéis corretos ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' indeterminate'.
• Os anéis de foco são visíveis, as setas funcionam em um grupo de rádio, o Space alterna checkbox/switch.

Comportamento

• O switch aplica as alterações imediatamente; erro: retrocesso e mensagem.
• O tri-state de «Selecionar tudo» é válido; os cliques da editora funcionam.

Visual

• Contraste ≥ AA; o estado não é transmitido apenas pela cor.
• Zonas de clique ≥ 44 x 44 px; a ordem e o alinhamento são estáveis.

Celular

• O controlador Segmented para 2-4 variantes de rádio foi testado para o tanque.
• Não há conflito entre o dedo e a rolagem.

16) Documentação em design

Componentes: 'Checkbox', 'Switch', 'RadioGroup '/' SegmentedControl'.
Tocos de tamanho/animação/foco, exemplos de copiação.
Pattern: «Selecionar tudo» (tri-state), «Aplicação instantânea», «Undo após risco».
Do/Don 't Galeria: switch com preservação adiada (don' t), rádio em vez de checkbox (don 't), segmentos para conjuntos curtos (do).

Resumo curto

A escolha do controlador é sobre o sentido e a expectativa: checkbox - bandeiras e grupos independentes, switch - ativação instantânea/desligamento da função, rádio - exatamente uma opção do conjunto. Suporte a disponibilidade, pense em estados assincrônicos e copiações - e os usuários mudam as configurações com segurança sem erros ou surpresas.