컨트롤 선택: 체크 박스, 스위치, 무선 버튼

1) 주요 차이점 ("그림" 이 아닌 의미)

• N 중 하나가 필요합니다-라디오를 가져 가십시오.
• 플래그 세트-체크 박스가 필요합니다.
• 동작을 즉시 변경하는 이진 토글 스위치 하나가 필요합니다. 스위치.

2) 결정 트리 (짧은)

1. 몇 가지 독립적 인 선거? → 체크 박스.
2. 세트에서 정확히 하나의 옵션? → 라디오 버튼 (또는 세그먼트 제어/태그).
3. 하나의 이진 플래그, 효과는 즉각적이고 눈에 띄나요? → 스위치.
4. "부분" 마크 (서브 세트) 가 필요하십니까? → 3 상태의 체크 박스.
5. 위험/비용이 높습니다 (지불, 중재)? → 무선/체크 박스 + 확인 (전환 아님).

3) 사용자 행동 및 기대

스위치 = 즉각적인 결과. 전환 후 사용자는 별도의 저장없이 즉각적인 효과와 가역성을 기대합니다.
Checkbox = 옵션 선택. 즉시 또는 버튼으로 적용 할 수 있습니다. 모델을 명시 적으로 표시하는 것이 중요합니다 ("설정 저장 "/" 클릭 저장").
라디오 = 모드 선택. 전환은 인터페이스를 재구성 할 수 있습 신호 변경 (마이크로 애니메이션/텍스트).

4) 상태 및 시각 의미

일반/호버/초점/활성/장애인/오류. 텍스트와 표시기의 대비는 AA입니다.
트라이 스테이트 (체크 박스): 공백/부분/선택. 부분 상태 자체는 클릭 할 수 없습니다. 클릭은 "비어 있지 않고" "선택" 으로 변경됩니다.
스위치: 색상과 러너 위치가 명확하게 켜져 있습니다. 색상 만이 의미의 반송파가 아닙니다 (아이콘/라벨 근처).

5) 카피 라이팅 및 서명

선택하면 적용되는 동사 + 객체 또는 문장.

Checkbox: "전자 메일 알림 수신".
스위치: "알림: 켜기/끄기" (왼쪽, 상태-오른쪽 또는 스위치 자체 레이블).
라디오: "계수 형식: Decimal/Fractional/American".
이중 거부를 피하십시오: "플러그를 뽑지 마십시오"... -혼란.

위험한 행동을 위해서는 "On. 빠른 베팅 (확인 없음) -5 초 이내에 취소 할 수 있습니다. "

6) 접근성 (A11y) 및 키보드

Checkbox: 'role = "checkbox"', 'aria-secked = "참' 거짓 '혼합' ', 공간-전환.
스위치: 스위치 시각이있는 네이티브 '<입력 유형 = "체크 박스">' 또는 '아리아 선택' 이있는 '역할 = "스위치" 체크 박스와 같은 동작 (공간).
라디오: 컨테이너에서 'role = "radiogroup"', 요소에서 'role = "radio"', 화살표에있는 화살표: 선택을 이동, 공간/입력-확인.
그룹: 일반적인 맥락에서는 'fieldset '/' legend' 를 사용하십시오.
포커스 링을 보이게하십시오. 클릭 영역의 크기는 터치 당 44 × 44 px 이상입니다.

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) 비동기식 변경 및 오류

스위치 + 네트워크: → 즉시 낙관적 인 UI → 서버 확인 → 실패한 경우 부드럽게 롤백하여 이유를 표시하십시오.
"저장" 의 Checkbox/라디오: 아직 확인이 없습니다-글로벌 동작을 변경하지 마십시오.
위험한 조치: 5-10 초 동안 확인 (modalka) 또는 실행 취소 (규정이 허용하는 경우).

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) 모바일 패턴

스위치는 모바일 설정의 주요 이진 제어입니다.
라디오는 2-4 옵션을 위해 세그먼트 제어로 교체 할 수 있습니다 (손가락 타격이 더 좋습니다).
목록의 체크 박스-클릭 영역이 넓고 빠른 멀티 셀렉션을 지원합니다.

9) 그룹화 및 레이아웃 패턴

라디오: 한 줄의 세그먼트 인 2-3 옵션에 대한 세로 목록 (더 나은 스캔).

체크 박스: 1 열 정렬; 긴 목록- 그룹의 "모두 선택" + 3 상태

스위치: 왼쪽에 레이블, 같은 줄에 오른쪽에 제어; 필요에 따라 텍스트로 현재 상태를 표시합니다 (On/Off).

10) 안티 패턴

변경 사항을 즉시 적용하지 않는 전환 ("저장" 필요).
여러 선택이 가능한 라디오 버튼.
상호 배타적 인 옵션을위한 체크 박스 (두 개의 체크 박스로서 "남성/여성").
위험한 돌이킬 수없는 행동을위한 이진 전환 (데이터 삭제).
텍스트에서 이중 부정.
초점이 손실되도록 오류에 대한 레이아웃을 변경하십시오.

11) iGaming 세부 사항 (예)

계수 형식: Decimal/Fractional/American 무선 그룹-이 즉시 적용되어 프로파일에 저장됩니다.
빠른 내기: 명시적인 설명이있는 빠른 베팅 (확인 없음) 전환하고 각 작업 후 5-10 초 동안 실행되지 않습니다.
구독/알림: 이벤트 유형별 체크 박스 (승리, 토너먼트, 예금). 그룹 체크 박스 "모두 선택" -3 상태.
계수의 실시간 업데이트: 낙관론과 네트워크 오류에 대한 롤백으로 "라이브 모드" 를 전환하십시오.
책임있는 재생 제한: 기간 (주/주/월) + 금액 필드의 라디오 버튼; "내일부터" 항목으로 변경된 한도 확인.

12) 디자인 시스템 토큰 (예)

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) 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) 측정 및 실험

스위치에서 미스 클릭 속도와 주파수 취소

무선 그룹별 선택 및 검증 오류 시간.

비율 "모두 선택" 및 수동 선택 (속도, 정확도) 과 비교

A/B: 라벨 카피 라이팅, 옵션 순서, 세그먼트 대 라디오, "즉시 적용" 대 "버튼".

15) QA 체크리스트

의미와 선택

• 제어는 작업에 해당합니다 (다중 → 체크 박스; N → 라디오 중 하나; 즉석 이진 → 스위치).
• 위험한 행동의 경우 확인/취소가 있습니다.

가용성

• 올바른 역할 ('체크 박스 '/' 스위치 '/' 라디오 그룹 '/' 라디오'), '아리아 확인 '/' 불확정'.
• 초점 링이 보이고 화살표가 무선 그룹에서 작동하며 공간 스위치 체크 박스/스위치가 작동합니다.

행동

• 스위치는 변경 사항을 즉시 적용합니다 오류-롤백 및 메시지.
• "모두 선택" 에 대한 3 상태가 정확합니다. 라벨 클릭이 작동합니다

비주얼

• 대조 AA; 상태는 색상 만 아닙니다.
• 영역을 클릭하면 44 × 44 px; 순서와 정렬은 안정적입니다.

모바일

• 터치 테스트 된 2-4 개의 무선 변형에 대한 세그먼트 제어.
• 손가락 타격 및 스크롤은 충돌하지 않습니다.

16) 설계 시스템의 문서

구성 요소: 'Checkbox', 'Switch', 'RadioGroup '/' SegmentedControl'.
크기/애니메이션/초점 토큰, 카피 라이팅 예.
패턴: "모두 선택" (3 상태), "즉석 응용 프로그램", "위험 후 실행 취소".
갤러리 수행/수행 금지: 지연 저장 스위치 (하지 말 것), 체크 박스 대신 라디오 (하지 않음), 짧은 세트 용 세그먼트 (수행).

간략한 요약

제어 선택은 의미와 기대에 관한 것입니다: 체크 박스-독립 플래그 및 그룹, 스위치-즉시 켜기/꺼짐 기능, 라디오-세트에서 정확히 하나의 옵션. 가용성을 유지하고 비동기 상태 및 카피 라이팅에 대해 생각하십시오. 사용자는 오류나 놀라움없이 자신있게 설정을 변경