---
{"id":"radio-button","title":"라디오","category":"컴포넌트","order":35,"summary":"서로 배타적인 한 가지 선택의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/radio-button/usage"]}
---

# 라디오

## 목적과 사용

서로 배타적인 한 가지 선택에 사용합니다. 독립적인 여러 선택에는 체크박스를 사용합니다.

## 구성과 변형

그룹 제목, 선택지, 설명, 선택 상태. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- RAD-01 MUST: 한 그룹에서 동시에 하나만 선택됩니다.
- RAD-02 SHOULD: 비교가 필요한 적은 선택지는 숨긴 목록보다 펼쳐 보여 줍니다.
- RAD-03 MUST: 유료·위험 선택에 의도치 않은 기본값을 넣지 않습니다.
- RAD-04 MUST: 옵션 이름 옆에 가격·조건 등 결정에 필요한 차이를 제공합니다.

## 접근성

그룹 이름과 label을 연결하고 방향키 조작을 검증합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: 결제 주기와 금액을 각 선택지에 표시 / 피함: 가격을 hover에만 숨김.

## 우리 구현과 연결

Blesta 결제 방법·VPS 상품 옵션에 적용할 문서 기준입니다. 자동 선택 정책 변경은 별도 검토입니다.

제품별 소유 경로는 [WICKEDVPS](product-vps.md), [Panel](product-panel.md), [Blesta](product-blesta.md)와 [소스 근거](source-evidence.md)를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

## 상태와 검증

기본값·선택 변경·비활성 옵션·오류 연결·방향키를 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. [검증 체크리스트](testing.md)에 증거를 연결합니다.