Checkbox
Checkbox는 사용자가 여러 선택지 중 하나 이상의 항목을 선택할 수 있도록 하는 UI 요소입니다. 일반적으로 선택 여부를 나타내는 체크 표시로 활성화하거나 비활성화할 수 있습니다.Anatomy
Anatomy
- Icon
- Text label
- Sub text
Spec
Spec
State
Deselected, Disabled, Selected 상태로 분류됩니다.
Basic placement
아이콘 - 레이블 사이 패딩 : 4px 컴포넌트 사이 패딩 :12px 레이블 - 부가 텍스트 사이 패딩 : 4px 레이블 우측에는 텍스트 버튼, 툴팁, 뱃지가 결합될 수 있습니다.
Thumbnail placement
썸네일의 배치는 패딩 8px을 기본값으로 사용합니다. Checkbox가 우측 또는 좌측에 위치할 경우 동일한 값을 사용합니다.
Usage
Usage
Do
부가 텍스트가 사용될 경우 레이블 하단 혹은 우측에 결합하여 사용합니다. 응용형(2줄 이상의 텍스트 그룹)과 구분하여 사용하도록 합니다.
Don’t
레이블은 상하 가운데 정렬을 맞추어 한 줄만 사용 합니다.
Do
부가 텍스트는 가이드에 맞게 사용하도록 합니다.
Don’t
부가 텍스트를 박스 형태로 사용하지 않습니다.
© KYOBO BOOK CENTRE교보문고 바로가기