📌
1.체크 박스 (Checkbox)
2. 라디오 버튼 (Radio Button)
🔗참고 :
https://m3.material.io/components/checkbox/overview
https://m3.material.io/components/radio-button/overview
체크 박스 (Checkbox)
목록에서 하나 혹은 다수의 옵션을 선택하기 위해 사용
하위 선택을 포함하는 목록도 보여줄 수 있다.
시각적으로 비슷하게 생긴 선택지들끼리 그룹 짓는다.
📐주의
라디오 버튼과 스위치 (토글 버튼)도 선택 컨트롤 컴포넌트이지만 라디오 버튼은 오직 한개의 옵션만 선택할 수 있고 스위치는 설정 같은 패널에서 독립적으로 사용된다.
반응형 레이아웃
넓은 크기의 화면에서는 사이드 시트 (side sheet)같은 한 공간에 여러개의 체크박스를 위치시켜 그룹으로 만들 수 있다.
행동
여러개의 체크박스가 선택될 수 있다.
부모 체크박스가 체크되면 자식 체크박스들은 모두 선택된다.
모든 자식 체크 박스들이 체크가 되지 않았을 경우 부모 체크 박스에 체크가 되지 않을 수도 있고 체크 표시 대신 ‘-’ 표시가 들어가있을 수도 있다. (indeterminate)
그 외 참고
만약 체크박스가 선택 되었다면 체크 박스는 그것의 선택된 상태를 명료하고 즉각적으로 보여줄 수 있어야한다.
체크박스 뿐만 아니라 텍스트 라벨을 눌렀을 때도 선택이 되어야한다.
라디오 버튼 (Radio Button)
선택지 목록에서 사용자가 한개만 선택할 수 있도록 할 때 사용
한 번에 하나의 라디오 버튼만 선택될 수 있다.
선택지가 5개 이하일 때 사용한다.
📐 주의
라디오 버튼은 체크박스처럼 하나의 체크박스에 하위 체크박스들이 포함되지 않도록 한다.
공간이 한정적일 때는 라디오 버튼 대신 드롭 다운 메뉴를 사용한다.
구성
- 아이콘 (선택된 상태 Selected)
- 아이콘 (선택 안 된 상태 Unselected)
- 인접한 라벨 텍스트
항상 라디오 버튼은 라디오 버튼을 클릭하면 무엇을 선택하는지 설명해주는 인접한 라벨 텍스트와 함께 짝지어 다닌다.
그 외 참고
라디오 버튼은 쌓이는 레이아웃 안에 위치한다.
수직 방향으로 쌓이고 꼭 미리 하나의 라디오 버튼이 선택되어 있어야한다.
라디오 버튼의 아이콘이나 라벨 텍스트를 클릭하거나 탭했을 때 선택된다.
Tab, 방향키 : 포커스 이동
Shift + Tab : 뒤돌아가기
스페이스 : 선택 안 된 라디오 버튼 클릭
접근성 라벨은 라디오 버튼의 라벨 텍스트와 동일
실습
📍만드는 방법
- 라디오 버튼
- 24px 프레임 생성, 20px 원 생성
- 스트록 적용, 복사/붙여넣기 한 후 Shift + alt 누르고 크기 조절
- 스트록 적용 해제하고 색 채워줌
- 한 번에 선택해서 바로 오토레이아웃을 적용하면 큰 원이 껍데기가 되므로 프레임으로 한 번 더 감싸서 오토 레이아웃을 적용한다.
- 컴포넌트로 만들어 준 후 베리언츠 추가하여 선택되지 않은 상태도 만들어 준다.
- 상태값을 on/off로 만들어 주면 토글 버튼으로 조절이 가능하다.
- 체크박스
- 24px 프레임 생성, 20px 정사각형 생성, 정사각형 안에 펜툴로 체크 아이콘 생성
- 라디오 버튼 만들었을 때처럼 프레임으로 한 번 더 감싸 오토레이아웃 적용 후 컴포넌트로 변경
- 베리언츠 추가하여 3가지 상태를 만들어줌
(selected, unselected, indeterminate)
