Switch
스위치(switch)는 특정 옵션을 켜고 끌 수 있는 컨트롤로 사용자가 단일 항목을 설정 또는 해제해야 하는 경우 이 선택 컨트롤을 사용합니다.
사용자는 Switch의 상태를 보고 옵션의 설정 여부를 파악할 수 있습니다.
사용자는 Switch의 상태를 보고 옵션의 설정 여부를 파악할 수 있습니다.
Anatomy
01
02
- Track : On / Off 상태 표시
- Thumb : Circle이 좌측에 있는 경우 Off, 우측에 있는 경우 On
State
상태는 On / Off에 따라 Default, Active, Disabled로 분류됩니다. Active 상태일 때, Circle color는 해당 솔루션의 primary color를 사용합니다.
Default
Check
Disable
Size
사이즈는 md / lg 2가지를 사용합니다.
lg (36px * 20px)
md (30px * 16px)
사용 가이드
사용 관련
Don’t
정의된 선택 값 중에 하나를 선택하기 위해 토글을 사용하지 않습니다. Radio를 사용합니다.
Don’t
스위치는 활성화(예: 켜짐/꺼짐 상태)를 전달하는 데 가장 적합하고, 체크박스는 선택(예: 여러 테이블 행)을 전달하는 데 가장 적합합니다. 체크박스와 달리 스위치는 오류 상태를 가질 수 없습니다.