본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

체크박스

체크박스는 사용자가 여러 개의 옵션 중 한 개 이상의 값을 선택할 수 있도록 하는 경우에 사용한다. 즉, 체크박스 옵션의 선택은 상호배타적이므로 한 개의 옵션을 선택하는 것은 다른 옵션의 선택에 영향을 미치지 않는다.

컴포넌트명

체크박스 (Checkbox)

체크박스 (Checkbox) 스타일 예시

  1. 1.체크박스 양식

    체크박스의 현재 선택 상태를 보여줌

  2. 2.체크박스 레이블

    선택하거나 선택 해제할 정보를 나타냄

  3. 3.도움말(선택)

    옵션 목록의 카테고리에 대한 설명 또는 옵션 선택에 대한 도움말을 제공함

유형

Checkbox

Size콘텐츠 내에서 적합한 계층을 가진 크기로 사용한다.

Large

부가적인 설명이 들어갑니다.

Small

부가적인 설명이 들어갑니다.

코드 보기

Check선택과 미선택, 중간 상태에 따라 사용한다.

Off

부가적인 설명이 들어갑니다.

On

부가적인 설명이 들어갑니다.

State사용자의 상호작용 시 컬러가 변경된다.

Default

부가적인 설명이 들어갑니다.

부가적인 설명이 들어갑니다.

Disabled

부가적인 설명이 들어갑니다.

부가적인 설명이 들어갑니다.

Text보조 설명글 또는 얼럿을 필요시에 제공한다.

Help text

부가적인 설명이 들어갑니다.

Non-help text

유형

Checkbox_chip

Size콘텐츠 내에서 적합한 계층을 가진 크기로 사용한다.

Large

Small

코드 보기

State사용자의 상호작용 시 컬러가 변경된다.

Default

Active

Disabled

가이드

  • 체크박스의 레이블은 분명하고 정확하게 제공한다. 사용자가 어떤 옵션을 선택하는 것인지 이해할 수 있도록 체크박스의 레이블은 분명하고 정확하게 제공해야 한다.