Radio
여러 옵션 중 하나를 선택할 수 있는 라디오 버튼 컴포넌트입니다.
설치
Terminal
npx @msub-core/ui-cli add radio
사용법
TSX
import { RadioGroup } from "@msub-core/ui/components/radio"
function MyComponent() {
const [value, setValue] = useState("option1")
return (
<RadioGroup
label="옵션 선택"
value={value}
onChange={setValue}
options={[
{ value: "option1", label: "옵션 1" },
{ value: "option2", label: "옵션 2" },
{ value: "option3", label: "옵션 3" },
]}
/>
)
}RadioGroup Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| options | RadioOption[] | - | Yes | 라디오 옵션 배열 |
| value | string | - | No | 현재 선택된 값 (controlled) |
| defaultValue | string | - | No | 기본 선택 값 (uncontrolled) |
| onChange | (value: string) => void | - | No | 값 변경 핸들러 |
| name | string | - | No | 라디오 그룹 이름 (같은 그룹끼리 연결) |
| label | string | - | No | 그룹 라벨 |
| description | string | - | No | 그룹 설명 |
| size | "sm" | "default" | "lg" | "default" | No | 라디오 버튼 크기 |
| horizontal | boolean | false | No | 가로 배치 여부 |
| disabled | boolean | false | No | 전체 비활성화 |
| required | boolean | false | No | 필수 입력 여부 |
RadioOption 타입
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| value | string | - | Yes | 옵션 값 |
| label | string | - | Yes | 표시 라벨 |
| description | string | - | No | 설명 텍스트 |
| disabled | boolean | - | No | 개별 옵션 비활성화 |
기본
알림 설정
Sizes
Small
Default
Large
설명 텍스트
요금제 선택서비스 이용에 적합한 요금제를 선택하세요
기본 기능 무료 제공
월 9,900원, 모든 기능 이용 가능
맞춤 가격, 전용 지원 제공
가로 배치
성별
필수 입력
서비스 이용 동의*
비활성화
전체 비활성화
개별 비활성화
실제 사용 예시
결제 수단 선택
Visa, Mastercard, 국내 모든 카드
실시간 계좌이체
SKT, KT, LG U+
간편하게 결제하세요