Radio button

Radio button (라디오 버튼)

상호 배타적 선택의 그룹이 있고 그룹에서 하나만 선택이 허용될 때 라디오 버튼을 사용하세요. 한 번에 하나의 라디오 버튼만 선택할 수 있는 단일 선택 입력 컴포넌트입니다.

출처: Radio button

본문

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

개요 (Overview)

라디오 버튼은 다중 선택이 아닌 상호 배타적 선택에 사용돼요. 한 번에 하나의 라디오 버튼만 선택할 수 있습니다. 사용자가 새 항목을 선택하면 이전 선택은 자동으로 해제됩니다.

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

폼 (Form)

타일, 데이터 테이블, 모달, 사이드 패널, 전체 페이지의 폼에서 사용할 수 있어요.

설정 (Settings)

메뉴, 페이지, 컴포넌트에서 한 설정에서 다른 설정으로 바꾸는 데 사용돼요. 필터링 메커니즘으로 작동하기도 합니다.

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

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

여러 항목을 선택할 수 있을 때는 체크박스를 사용하세요.

여러 항목을 선택할 수 있는데 라디오 버튼을 사용하지 마세요.

포맷 (Formatting)

구조 (Anatomy)

라디오 버튼 컴포넌트는 오른쪽에 배치된 텍스트 라벨을 가진 클릭 가능한 원(input) 집합으로 구성돼요. 라디오 버튼 그룹이 있다면 그룹 라벨을 추가할 수 있습니다.

  • 그룹 라벨(Group label, 선택): 옵션 그룹을 설명하거나 선택을 위한 지침을 제공해요.
  • 라디오 버튼 입력(Radio button input): 라디오 버튼의 상태를 나타냅니다. 기본적으로 어떤 옵션도 미리 선택되지 않습니다.
  • 라디오 버튼 라벨(Radio button label): 선택하거나 선택 해제하려는 정보를 설명해요.

정렬 (Alignment)

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

세로 쌓기와 가로 정렬 비교

오른쪽에서 왼쪽으로 읽는 언어는 라벨을 입력의 왼쪽에 배치하는 것이 허용됩니다.

왼쪽에서 오른쪽 대신 오른쪽에서 왼쪽으로 읽는 언어용 라디오 버튼 예시

배치 (Placement)

라디오 버튼 컴포넌트는 폼에서 자주 사용돼요. 폼은 전체 페이지, 모달, 사이드 패널에 배치할 수 있습니다. 라디오 버튼은 메뉴에서 설정을 바꾸거나 데이터 테이블에서 단일 항목을 선택하는 데도 사용할 수 있어요.

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

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

폼에서 라디오 버튼과 다른 컴포넌트 사이의 간격

콘텐츠 (Content)

주요 요소 (Main elements)

그룹 라벨 (Group labels, 선택)

라디오 버튼 세트와 함께 헤딩이 와서 추가 컨텍스트나 명확성을 제공할 수 있어요. 어떤 경우에는 라디오 버튼 그룹이 이미 그룹 라벨을 가진 더 큰 컴포넌트 그룹 안에 있을 수 있어요. 이 경우 라디오 버튼 컴포넌트 자체에 추가 그룹 라벨은 필요하지 않습니다.

  • 그룹 라벨은 컨텍스트에 따라 그룹의 카테고리를 명시하거나 아래에서 취할 동작을 간결히 지시할 수 있어요.
  • 그룹 라벨에는 문장식 대소문자(sentence case)를 사용하세요.

라디오 버튼 라벨 (Radio button labels)

  • 라디오 버튼에는 항상 명확하고 간결한 라벨을 사용하세요.
  • 라벨은 라디오 버튼 입력의 오른쪽에 나타나요.

넘침 콘텐츠 (Overflow content)

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

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

줄바꿈된 텍스트를 라디오 버튼과 세로 중앙 정렬하지 마세요.

추가 가이드 (Further guidance)

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

동작 (Behaviors)

상태 (States)

라디오 버튼 입력은 선택 안 됨(unselected)과 선택됨(selected)의 두 가지 상태를 허용해요. 라디오 버튼은 기본적으로 어떤 것도 미리 선택되지 않습니다. 한 번에 하나의 라디오 버튼만 선택되어야 해요. 사용자가 새 항목을 선택하면 이전 선택은 자동으로 해제됩니다. 사용자가 이미 항목을 선택했지만 해제하고 싶다면 "other"나 "none" 옵션 같은 대안을 추가하는 것을 고려하세요.

선택 안 됨·선택됨 상태 외에도 라디오 버튼은 포커스, 비활성(disabled), 읽기 전용(read-only), 오류, 경고 상태가 있습니다. 라디오 버튼에 비활성 또는 읽기 전용 상태 중 무엇을 쓸지 결정할 때는 읽기 전용 상태 패턴(Read-only states pattern) 지침을 참고하세요.

그룹 상태 (Group states)

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

인터랙션 (Interactions)

마우스 (Mouse)

사용자는 라디오 버튼 입력을 직접 클릭하거나 라디오 버튼 라벨을 클릭해 항목을 실행할 수 있어요. 두 영역 모두 인터랙티브하면 더 접근성 좋은 클릭 대상이 됩니다.

키보드 (Keyboard)

기본적으로 어떤 옵션도 미리 선택되지 않습니다. 사용자는 Up 또는 Down 화살표 키를 눌러 라디오 버튼 입력 사이를 이동할 수 있어요. 사용자가 기본 표시가 없는 라디오 버튼 세트에 도달하면 Space를 눌러 라디오 버튼을 선택하거나 화살표 키를 눌러 다음 라디오 버튼을 선택할 수 있습니다. 추가 키보드 인터랙션은 접근성 탭을 참고하세요.

AI 존재 (AI presence)

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

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

라디오 버튼 대 체크박스 (Radio buttons versus checkboxes)

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

라디오 버튼 대 선택 가능한 타일 (Radio button versus selectable tile)

라디오 버튼은 간결하고 비교하기 쉬운 옵션을 가져야 해요. 가격 플랜이나 추가 링크처럼 선택을 위해 더 많은 정보가 필요하다면 선택 가능한 타일(selectable tile) 사용을 고려하세요.

라디오 버튼 대 토글 스위치 (Radio button versus toggle switch)

사용자 옵션이 on/off나 true/false의 두 가지 선택으로 제한될 때는 토글 스위치(Toggle switches)가 선호돼요. 반면 라디오 버튼은 그 외에도 많은 다른 옵션을 가질 수 있습니다.

구조화된 리스트 (Structured list)

간단한 데이터와 여러 컬럼이 있는 목록에서 사용자가 단일 항목을 선택해야 한다면 선택 가능한 구조화된 리스트(structured list)를 사용할 수 있어요.

테이블 (Tables)

테이블 안에서 라디오 버튼을 어떻게 사용하는지에 대한 지침은 데이터 테이블 컴포넌트를 참고하세요.

참고 자료 (References)

더 알아보기 (Learn more)

라디오 버튼은 상호 배타적 선택에서 하나만 고를 때 쓰는 단일 선택 입력이에요. 여러 항목을 고를 수 있다면 체크박스를 사용하고, 두 선택지뿐이면 토글 스위치를, 더 많은 정보가 필요한 선택은 선택 가능한 타일을 쓰세요. 라벨은 간결하게 유지하고 기본 선택 없이 화살표 키로 이동할 수 있게 하는 것이 일반적입니다.