Radio Button
Radio Button은 여러 옵션 중 하나만 선택해야 할 때 사용하는 컴포넌트입니다.
Radio Button
Radio Button은 여러 옵션 중 하나만 선택해야 할 때 사용하는 컴포넌트입니다.
Radio Button
Radio Button은 여러 옵션 중 하나만 선택해야 할 때 사용하는 컴포넌트입니다.
Anatomy
ESSENTIAL
1. 라디오 박스
사용자가 클릭하여 선택 여부를 전환하는 상호작용 영역입니다.
2. 레이블
라디오 버튼의 의미를 명확히 설명하는 텍스트입니다.
OPTIONAL
3. 디스크립션
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 보통 작은 크기와 낮은 대비로 표현됩니다.
Anatomy
ESSENTIAL
1. 라디오 박스
사용자가 클릭하여 선택 여부를 전환하는 상호작용 영역입니다.
2. 레이블
라디오 버튼의 의미를 명확히 설명하는 텍스트입니다.
OPTIONAL
3. 디스크립션
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 보통 작은 크기와 낮은 대비로 표현됩니다.
Anatomy
ESSENTIAL
1. 라디오 박스
사용자가 클릭하여 선택 여부를 전환하는 상호작용 영역입니다.
2. 레이블
라디오 버튼의 의미를 명확히 설명하는 텍스트입니다.
OPTIONAL
3. 디스크립션
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 보통 작은 크기와 낮은 대비로 표현됩니다.
State
Control
state
default
hover
disabled
selected
label
Control
state
default
hover
disabled
selected
label
Control
state
default
hover
disabled
selected
label
Properties
size | L, S |
state | dafault, hover, disabled |
selected | false, true |
has label | false, true |
description | false, true |
Properties
size | L, S |
state | dafault, hover, disabled |
selected | false, true |
has label | false, true |
description | false, true |
Properties
size | L, S |
state | dafault, hover, disabled |
selected | false, true |
has label | false, true |
description | false, true |
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개 이상일 경우 드롭다운 메뉴를 사용해야 합니다.