Switch

Anatomy

• root
• control
• thumb
• label (small 전용)

Options

Size

[이미지: small, medium 스위치 사용 사례]

• small: Label과 함께 사용되는 작은 크기로, 주로 화면 내에서 특정 기능을 켜고 끄는 데 사용됩니다.
• medium (기본값): 단독으로 사용되는 기본 크기로, 설정 페이지와 같은 목록형 UI에서 선택 유무를 표시하는 데 사용됩니다.

Disabled

현재 Switch가 상호작용 할 수 없음을 나타냅니다. 레이아웃의 연속성을 유지하고, 다시 활성화될 수 있는 Switch가 존재하는 것을 알리는 목적으로 사용합니다.

Label (small 전용)

Label은 스위치의 기능을 설명하는 텍스트입니다. 명확하고 간결한 표현을 유지하고, 가능한 명사형으로 작성합니다.

Behaviors

선택 전환

사용자가 스위치를 탭하면 핸들이 트랙을 따라 반대쪽으로 슬라이드되면서 상태가 전환됩니다.

텍스트 오버플로우

[이미지: 긴 텍스트 레이블이 있는 스위치에서 텍스트가 줄바꿈된 예시]

Label이 너무 길면 자동으로 줄바꿈됩니다. 이때, Label의 첫 줄은 Control과 세로 가운데 정렬이 유지되어야 합니다.

Usage Guidelines

Switch vs Checkbox

• Switch는 활성화/비활성화 상태를 나타내는 데 적합합니다.
• Checkbox는 선택/미선택 상태를 나타내는 데 적합합니다.

[이미지: 스위치와 체크박스 사용의 올바른 예시 비교]

즉각적인 효과

스위치의 효과는 저장이나 확인 절차 없이 즉시 시작되어야 합니다. 만약 변경 사항을 저장해야 하는 경우에는 스위치 대신 체크박스를 사용하세요.

Label 작성 지침

[이미지: 좋은 레이블 예시와 피해야 할 레이블 예시]

• 간결한 설명(1-3단어)을 사용하세요.
• 가능한 명사형으로 작성하되, 명확성을 위해 필요한 경우 동사를 사용할 수 있습니다.
• "켜기" 또는 "끄기"와 같은 상태 관련 동사 구문은 피하세요.
• 중립적인 어조를 사용하세요.
• 영문의 경우, Sentence case(첫 글자만 대문자)를 사용하세요.

개요

옵션 테이블

링크

스펙

base

size=medium

size=small