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

라디오 버튼

라디오 버튼은 사용자가 여러 개의 옵션 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다. 사용자가 옵션 목록에서 새로운 옵션을 선택했을 때, 기존에 선택되었던 옵션은 자동으로 선택이 해제되어야 한다.

컴포넌트명

라디오 버튼 (Radio button)

라디오버튼 (Radio button) 스타일 예시

  1. 1.버튼 양식

    버튼의 현재 선택 상태를 보여줌

  2. 2.버튼 레이블

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

  3. 3.도움말(선택)

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

유형

Radio_button

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

Large

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

Small

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

코드 보기

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

Off

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

On

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

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

Default

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

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

Disabled

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

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

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

Help text

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

Non-help text

유형

Radio_chip

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

Large

Small

코드 보기

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

Default

Active

Disabled

가이드

  • 라디오 버튼을 수평으로 배치하는 경우 버튼 간 간격을 충분히 제공한다. 각 라디오 버튼의 간격을 양식과 레이블 간 간격과 동일하게 제공하는 경우 사용자에게 혼동을 줄 수 있으므로 유의해야 한다.
  • 라디오 버튼의 레이블은 분명하고 정확하게 제공한다. 사용자가 어떤 옵션을 선택하는 것인지 이해할 수 있도록 라디오 버튼의 레이블은 분명하고 정확하게 제공해야 한다.
  • 사용자가 정확한 값을 입력하는 것이 중요한 경우 라디오 버튼의 특정 옵션을 기본 선택값으로 제공하지 않아야 한다. 사용자가 어떤 질문이나 선택을 해야 하는지를 놓치거나 잘못된 옵션 값을 제출하는 실수를 할 수 있으므로 유의해야 한다.