체크박스

Checkbox 구성 요소를 사용하면 사용자가 선택을 할 수 있으며, 이는 양식에서 기본 설정이나 동의를 가장 자주 표현합니다. 확인란은 Ignite UI for Angular와 시각적으로 동일합니다.

Checkbox Demo

Interaction State

확인란은 Enabled 또는 Disabled 상태로 삽입할 수 있습니다. Sketch 및 Adobe XD에서는 구성 요소를 삽입하기 전에 상태를 선택해야 합니다. Figma 에서는 속성 패널에서 전환할 수 있는 Hover, Focused 및 Invalid 속성을 하나 또는 조합으로 추가로 적용할 수 있습니다.

Layout Template

Sketch에서 체크박스는 체크박스 라벨이 체크박스 요소 뒤 또는 앞에 배치되는 라벨 위치 변형을 지원합니다. Figma 에서는 "Label Position" 속성을 사용하여 레이블 위치를 변경할 수 있습니다. Adobe XD에서는 스택을 사용하여 디자인 타임에 라벨과 체크박스 위치를 체크박스 비주얼의 왼쪽이나 오른쪽으로 드래그하기만 하면 변경할 수 있습니다.

State

확인란은 켜기, 끄기 및 불확정 선택 상태를 제공합니다. Figma 에서는 속성 패널의 "상태" 속성을 사용하여 선택 상태를 전환할 수 있습니다. Sketch 에서는 Symbol Overrides 통해 이를 달성하는 반면, Adobe XD에서는 Component States 패러다임을 사용하여 상태 간을 쉽게 전환할 수 있습니다.

스타일링

체크박스에는 체크 및 채우기 색상에 대한 다양한 옵션과 라벨 위치 및 색상을 설정하는 메커니즘을 통해 스타일링 유연성이 제공됩니다.

Usage

많은 체크박스가 필요한 경우 목록을 빠르게 검색할 수 있도록 열 그룹으로 정렬하는 것이 좋습니다. 더 적은 수의 체크박스를 한 줄에 나란히 배열할 수도 있지만 여러 열에 배열하는 것은 피해야 합니다.

하다	하지 않다