Radio Button
Radio Button
Radio Button
Radio Button은 여러 항목 중 하나만 선택해야 하는 경우에 사용됩니다. 사용자는 하나의 옵션을 선택하면 기존 선택은 자동으로 해제되며, 주로 설정, 필터, 설문 등 단일 선택이 필요한 상황에서 사용됩니다.
Radio Button
Radio Button은 여러 항목 중 하나만 선택해야 하는 경우에 사용됩니다. 사용자는 하나의 옵션을 선택하면 기존 선택은 자동으로 해제되며, 주로 설정, 필터, 설문 등 단일 선택이 필요한 상황에서 사용됩니다.
Radio Button
Radio Button은 여러 항목 중 하나만 선택해야 하는 경우에 사용됩니다. 사용자는 하나의 옵션을 선택하면 기존 선택은 자동으로 해제되며, 주로 설정, 필터, 설문 등 단일 선택이 필요한 상황에서 사용됩니다.
Anatomy
ESSENTIAL
1. 라디오 버튼
사용자가 클릭하여 하나의 옵션을 선택하는 상호작용 영역입니다. 여러 항목이 있는 경우, 방향키 또는 Tab 키로 옵션 간 이동을 지원합니다.
OPTIONAL
2. 레이블
라디오 버튼의 의미를 명확히 설명하는 텍스트입니다. 레이블 없이 단독으로 사용할 수 있습니다.
3. 디스크립션
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 설명문은 레이블과 함께 사용하는 것을 권장합니다.
Anatomy
ESSENTIAL
1. 라디오 버튼
사용자가 클릭하여 하나의 옵션을 선택하는 상호작용 영역입니다. 여러 항목이 있는 경우, 방향키 또는 Tab 키로 옵션 간 이동을 지원합니다.
OPTIONAL
2. 레이블
라디오 버튼의 의미를 명확히 설명하는 텍스트입니다. 레이블 없이 단독으로 사용할 수 있습니다.
3. 디스크립션
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 설명문은 레이블과 함께 사용하는 것을 권장합니다.
Anatomy
ESSENTIAL
1. 라디오 버튼
사용자가 클릭하여 하나의 옵션을 선택하는 상호작용 영역입니다. 여러 항목이 있는 경우, 방향키 또는 Tab 키로 옵션 간 이동을 지원합니다.
OPTIONAL
2. 레이블
라디오 버튼의 의미를 명확히 설명하는 텍스트입니다. 레이블 없이 단독으로 사용할 수 있습니다.
3. 디스크립션
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 설명문은 레이블과 함께 사용하는 것을 권장합니다.
State
State
State
Properties
Selected | false, true |
Label | false, true |
Description | false, true |
Size | L, S |
State | default, hover, disabled |
Properties
Selected | false, true |
Label | false, true |
Description | false, true |
Size | L, S |
State | default, hover, disabled |
Properties
Selected | false, true |
Label | false, true |
Description | false, true |
Size | L, S |
State | default, hover, disabled |
Spec
 | Clickable Area레이블을 포함한 행 전체를 클릭해 선택 상태를 변경할 수 있습니다. |
 | Spacing & Alignment리스트에 사용할 때는 항목 간 최소 12px 이상의 간격을 유지합니다. |
Spec
Clickable Area
레이블을 포함한 행 전체를 클릭해 선택 상태를 변경할 수 있습니다. 라디오 버튼과 텍스트는 동일한 인터랙션을 가집니다.
Spacing & Alignment
리스트에 사용할 때는 항목 간 최소 12px 이상의 간격을 유지합니다.
Spec
| Clickable Area레이블을 포함한 행 전체를 클릭해 선택 상태를 변경할 수 있습니다. |
| Spacing & Alignment리스트에 사용할 때는 항목 간 최소 12px 이상의 간격을 유지합니다. |
Usage
Do
필수 선택이 필요한 경우, 기본 선택값을 제공합니다.
Don't
옵션이 5개 이상일 경우, 라디오 버튼 대신 드롭다운 사용을 권장합니다.
Usage
Do
필수 선택이 필요한 경우, 기본 선택값을 제공합니다.
Don't
옵션이 5개 이상일 경우, 라디오 버튼 대신 드롭다운 사용을 권장합니다.
Usage
Do
필수 선택이 필요한 경우, 기본 선택값을 제공합니다.
Don't
옵션이 5개 이상일 경우, 라디오 버튼 대신 드롭다운 사용을 권장합니다.