Checkbox

Checkbox (체크박스)

체크박스는 목록에서 여러 항목을 선택할 때 사용하는 컴포넌트예요. 사용자는 0개, 1개, 또는 원하는 개수만큼 항목을 선택할 수 있습니다. 상호 배타적이지 않은 다중 선택을 위한 입력 요소입니다.

출처: Checkbox

본문

체크박스 with AI label이 이제 안정(stable) 버전이 됐어요. 이 추가는 컴포넌트의 시각적 모양을 바꾸고, 컴포넌트에 AI가 있을 때 AI 설명 가능성 기능을 도입합니다. 자세한 내용은 AI 존재(AI presence) 섹션을 참고하세요.

개요 (Overview)

체크박스는 다중 선택에 사용되며, 상호 배타적 선택에는 사용하지 않아요. 각 체크박스는 목록의 다른 체크박스와 독립적으로 동작하므로, 추가로 체크해도 다른 선택에 영향을 주지 않습니다.

언제 사용할까요 (When to use)

폼 (Forms)

전체 페이지, 모달, 사이드 패널의 폼에서 사용할 수 있어요.

필터링과 일괄 작업 (Filtering and batch action)

페이지, 메뉴, 컴포넌트 안에서 데이터를 필터링하는 데 사용돼요. 체크박스는 일괄 편집(batch editing) 목적으로 데이터 테이블(Data table)에서 찾아볼 수 있어요.

약관 (Terms and conditions)

체크박스 입력을 켜거나 끄는 것으로 약관에 동의하는지 여부를 나타낼 수 있어요.

하위 선택이 있는 목록 (Lists with sub-selections)

부모-자식 관계가 있을 때 사용돼요. 부모 체크박스로 모든 목록 항목을 일괄 선택할 수 있고, 부모를 해제하면 모든 목록 항목이 선택 해제됩니다. 또는 부모가 선택되지 않았을 때 자식들을 개별적으로 선택할 수 있는데, 이때 비결정(indeterminate) 상태가 사용됩니다.

전체 페이지 필터 목록 예시

언제 사용하지 말아야 할까요 (When not to use)

사용자가 목록에서 단 하나의 옵션만 선택할 수 있다면 체크박스 대신 라디오 버튼을 사용해야 해요. 체크박스는 집합에서 여러 항목을 선택할 수 있게 하지만, 라디오 버튼은 단 하나의 옵션만 선택할 수 있게 해줍니다.

하나의 항목만 선택할 수 있다면 라디오 버튼을 사용하세요.

하나의 항목만 선택할 수 있는데 체크박스를 사용하지 마세요.

포맷 (Formatting)

구조 (Anatomy)

체크박스 컴포넌트는 체크박스 라벨과 체크박스 입력으로 구성돼요. 체크박스 그룹이 있다면 그룹 라벨을 추가할 수 있습니다.

  • 그룹 라벨(Group label, 선택): 아래에서 무엇을 선택해야 하는지 알려줘요.
  • 체크박스 입력(Checkbox input): 적절한 상태를 나타내는 체크박스 입력이에요. 기본값은 선택되지 않은 상태입니다.
  • 체크박스 라벨(Checkbox label): 선택하거나 선택 해제하려는 정보를 설명해요.

정렬 (Alignment)

체크박스 라벨은 입력 요소의 오른쪽에 배치돼요. 체크박스 그룹이 있다면 사용 사례와 UI 구조에 따라 세로 또는 가로로 배치할 수 있어요. 가능하다면 체크박스와 라디오 버튼 그룹은 읽기 쉽도록 세로로 배치하세요.

세로 쌓기와 가로 정렬 비교

배치 (Placement)

체크박스 컴포넌트는 폼에서 자주 사용돼요. 폼은 전체 페이지, 모달, 사이드 패널에 배치할 수 있습니다. 체크박스는 약관에 동의하거나 정보를 필터링하는 데도 사용할 수 있어요.

폼에서 체크박스는 다음 컴포넌트의 아래 또는 앞에 최소 32px(layout-03) 간격을 두고 배치해야 해요. 공간이 더 제한적이거나 폼이 더 복잡하다면 24px(layout-02) 또는 16px(layout-01) 간격도 사용할 수 있습니다.

폼 간격에 대한 자세한 내용은 폼 스타일 가이드를 참고하세요.

폼에서 체크박스와 다른 컴포넌트 사이의 간격

체크박스 컴포넌트 자체의 간격에 대한 자세한 내용은 스타일 탭을 참고하세요.

콘텐츠 (Content)

주요 요소 (Main elements)

그룹 라벨 (Group labels, 선택)

  • 대부분의 경우 체크박스 집합 앞에는 추가 맥락이나 명확성을 제공하는 그룹 라벨이 옵니다.
  • 그룹 라벨은 그룹의 카테고리를 명시하거나 아래에서 취할 동작을 설명할 수 있어요.
  • 그룹 라벨에는 문장식 대소문자(sentence case)를 사용하세요.
  • 어떤 경우에는 체크박스 그룹이 이미 그룹 라벨을 가진 더 큰 컴포넌트 그룹 안에 있을 수 있어요. 이 경우 체크박스 컴포넌트 자체에 추가 그룹 라벨은 필요하지 않습니다.

체크박스 라벨 (Checkbox labels)

  • 체크박스에는 항상 명확하고 간결한 라벨을 사용하세요.
  • 라벨은 체크박스 입력의 오른쪽에 나타나요.
  • 라벨이 인터페이스에 보이는지 여부와 관계없이, 체크박스 하나든 그룹이든 코드에는 항상 라벨이 필요해요. 자세한 내용은 체크박스 코드 탭을 참고하세요.

넘침 콘텐츠 (Overflow content)

  • 체크박스 라벨은 세 단어 미만일 것을 권장해요.
  • 공간이 빠듯하다면 라벨을 다시 표현하는 것을 고려하세요. 체크박스 라벨 텍스트를 생략 부호(ellipsis)로 잘라내지 마세요.
  • 긴 라벨은 두 번째 줄로 넘어갈 수 있는데, 이게 잘라내기보다 낫습니다.
  • 텍스트는 컨트롤과 라벨이 상단 정렬되도록 체크박스 아래에서 줄바꿈되어야 해요.

라벨 텍스트를 체크박스 아래에서 줄바꿈해서 컨트롤과 라벨이 상단 정렬되도록 하세요.

줄바꿈된 텍스트를 체크박스와 세로 중앙 정렬하지 마세요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

동작 (Behaviors)

상태 (States)

체크박스 입력은 선택 안 됨(unselected), 선택됨(selected), 비결정(indeterminate)의 일련의 상태를 가질 수 있어요. 체크박스 집합의 기본 보기는 어떤 옵션도 선택되지 않은 상태입니다.

체크박스에 하위 선택 목록이 있고 그중 일부가 선택되고 일부가 선택되지 않았다면 비결정 상태를 사용하세요. 선택 안 됨·선택됨·비결정 상태 외에도 체크박스는 포커스, 비활성(disabled), 읽기 전용(read-only), 오류(error), 경고(warning) 상태가 있습니다. 체크박스에 비활성 또는 읽기 전용 상태 중 무엇을 쓸지 결정할 때는 읽기 전용 상태 패턴(Read-only states pattern) 지침을 참고하세요.

그룹 상태 (Group states)

체크박스 그룹은 읽기 전용, 비활성, 오류, 경고 상태와 헬퍼 텍스트 추가를 받을 수 있어요.

중첩 (Nesting)

부모-자식 관계가 필요할 때 체크박스를 중첩할 수 있어요. 사용자는 전체 옵션 집합을 선택하거나 일부 부분집합만 선택할 수 있습니다.

부모 체크박스를 체크하면 중첩된 모든 자식 체크박스가 자동으로 선택돼요. 부모 체크박스를 해제하면 모든 자식 체크박스가 자동으로 선택 해제됩니다.

자식 체크박스를 체크할 때 다른 자식 체크박스 중 하나라도 선택되지 않았다면, 부모 체크박스는 자동으로 비결정 상태가 돼요. 모든 다른 자식 체크박스가 선택된 상태에서 자식 체크박스를 해제하면, 부모 체크박스는 기본 선택 상태에서 비결정 상태로 전환됩니다.

인터랙션 (Interactions)

마우스 (Mouse)

사용자는 체크박스 입력을 직접 클릭하거나 체크박스 라벨을 클릭해 항목을 실행할 수 있어요. 두 영역 모두 인터랙티브하게 만들면 더 접근성 좋은 클릭 대상이 됩니다. 대상 위에 마우스를 올렸을 때의 유일한 호버 효과는 포인터 모양이 바뀌는 것입니다.

키보드 (Keyboard)

사용자는 Tab 또는 Shift-Tab을 눌러 체크박스 입력으로 이동하거나 사이를 이동할 수 있어요. 체크박스 입력에 포커스가 있는 동안 Space를 누르면 상태 변경을 실행할 수 있습니다. 추가 키보드 인터랙션은 접근성 탭을 참고하세요.

AI 존재 (AI presence)

체크박스에는 컨트롤에 AI가 있을 때 AI 라벨을 임베드하는 수정(modification)이 있어요. AI 변형은 AI 라벨이 추가된 것 외에는 일반 버전과 동일하게 동작하며, AI 라벨은 시각적 표시이자 설명 가능성 팝오버의 트리거 역할을 합니다. AI 라벨은 체크박스 그룹 라벨이나 개별 체크박스 라벨에 배치할 수 있어요.

AI용 디자인에 대한 자세한 내용은 Carbon for AI 가이드라인을 참고하세요.

체크박스 대 라디오 버튼 (Checkbox versus radio button)

라디오 버튼은 상호 배타적 선택의 그룹을 나타내지만, 체크박스는 그룹에서 하나 이상의 체크박스를 선택할 수 있게 해줘요. 한 그룹에서 하나만 선택이 허용되는 사용 사례에서는 체크박스 대신 라디오 버튼 컴포넌트를 사용하세요.

체크박스 대 토글 스위치 (Checkbox versus toggle switch)

결과 액션이 추가 확인 없이 즉시 적용될 때는 토글 스위치를 선호해요. 반면 체크박스는 보통 최종 확인 단계가 필요한 더 큰 흐름에서의 하나의 입력을 나타냅니다.

테이블 (Tables)

테이블 안에서 체크박스를 어떻게 사용하는지에 대한 지침은 데이터 테이블 컴포넌트를 참고하세요.

참고 자료 (References)

  • Data table
  • Form
  • Radio button
  • Toggle

더 알아보기 (Learn more)

체크박스는 여러 항목을 독립적으로 선택할 때 쓰는 다중 선택 입력이에요. 부모-자식 관계에서는 중첩과 비결정 상태를 활용하고, 단 하나만 선택할 수 있다면 라디오 버튼을 사용하는 게 맞아요. 라벨은 간결하게 유지하고, 코드에는 항상 접근성용 라벨을 포함하세요.