라디오
소수 옵션 중 하나만 고르는 단일 선택 컨트롤이다. 모든 선택지가 동시에 보여야 하고 독자가 비교해서 고르는 경우에 쓴다. 옵션이 많거나 공간이 좁으면 Select를 쓴다.
상태
unchecked
checked
disabled
활용 방법
보조 설명
description은 선택지가 뜻하는 범위를 라벨 아래에 덧붙인다.
Preview
tsx
<Radio label="Essay" description="긴 호흡의 편집 글" defaultChecked />
톤
tone은 선택 표시의 시맨틱 강조를 정한다.
Preview
tsx
<Radio tone="primary" label="Primary" defaultChecked /><Radio tone="point" label="Point" defaultChecked />
사용 지침
- · 옵션이 2~5개이고 모두 보여야 하면 Radio를 쓴다.
- · 여러 개를 동시에 선택하는 경우는 Checkbox를 쓴다.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | ReactNode | - | 옆 라벨 |
| description | ReactNode | - | 라벨 아래 보조 설명 |
| tone | "primary" | "point" | "danger" | "success" | "warning" | "primary" | 선택 표시의 강조색 |
| ...props | InputHTMLAttributes | - | 네이티브 radio 속성 전부 전달 |