RadioGroup
하나만 고를 때 써요. 화살표 키로 이동하면 바로 선택돼요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
default
disabled
checked
checked · disabled
사용법
- 다섯 개를 넘으면 Select항목이 많으면 RadioGroup은 너무 길어져요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| label | 그룹 이름 | — |
| value | 선택한 값 | — |
| Radio | value, disabled | — |
코드
tsx
<RadioGroup label="결제 주기" value={cycle} onValueChange={setCycle}>
<Radio value="month">월간 결제</Radio>
<Radio value="year">연간 결제</Radio>
</RadioGroup>