체크박스

체크박스 구성 요소를 사용하여 사용자가 선택할 수 있도록 하며, 이는 대부분 양식에서 선호도나 동의를 표현합니다. 체크박스는 Ignite UI for Angular와 시각적으로 동일합니다.

Checkbox Demo

Interaction State

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

Layout Template

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

State

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

스타일링

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

Usage

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

하다	하지 않다