Toggle, Checkbox, Radio button, 폼의 3종 신기

한 줄로

선택 입력의 3가지 기본 컴포넌트입니다. 각자 다른 사용 맥락과 다른 어원을 가집니다.

Toggle / Switch

물리적 토글 스위치(전등 스위치)의 비유입니다. 2007 iOS에서 본격 도입됐습니다.

특징은 다음과 같습니다.

즉시 적용: 누르는 순간 결과가 반영됩니다.
2가지 상태: 켜짐과 꺼짐.
시각적 차이: ON일 때 보통 채워진 색.

사용처는 다크 모드 켜기와 끄기, 알림 받기와 안 받기 같은 설정입니다.

Checkbox

종이 양식의 체크 박스에서 왔습니다. 19세기 우편 양식과 세금 신고서에서 시작됐습니다.

특징은 다음과 같습니다.

저장 시 적용: 폼 제출 시 한꺼번에 처리합니다.
다중 선택 가능: 여러 박스를 동시에 체크할 수 있습니다.
시각적: 빈 박스와 체크 표시.

사용처는 약관 동의, 관심사 다중 선택입니다.

Radio button

1950년대 자동차 라디오의 채널 선택 버튼에서 비유했습니다. 하나를 누르면 다른 게 자동으로 풀립니다. 한 번에 한 채널입니다.

특징은 다음과 같습니다.

단일 선택: 한 그룹에서 하나만 선택 가능합니다.
시각적: 빈 원과 채워진 원.

사용처는 결제 수단 선택, 성별, 단일 옵션입니다.

헷갈리기 쉬운 구분

Toggle: 단일 (on/off), 즉시 적용.
Checkbox: 다중 가능, 보통 저장 시 적용.
Radio: 단일 (그룹 내), 보통 저장 시 적용.

바이브 메이커가 챙길 한 가지

즉시 변경되는 설정은 Toggle, 폼 안의 약관이나 옵션은 Checkbox, 여러 선택지 중 하나는 Radio입니다. 이 3가지를 정확히 구분해서 쓰면 사용자가 헷갈리지 않습니다.

관련

Combo box · Action sheet · Form design