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

PropTypeDefaultRequiredDescription
optionsRadioOption[]-Yes라디오 옵션 배열
valuestring-No현재 선택된 값 (controlled)
defaultValuestring-No기본 선택 값 (uncontrolled)
onChange(value: string) => void-No값 변경 핸들러
namestring-No라디오 그룹 이름 (같은 그룹끼리 연결)
labelstring-No그룹 라벨
descriptionstring-No그룹 설명
size"sm" | "default" | "lg""default"No라디오 버튼 크기
horizontalbooleanfalseNo가로 배치 여부
disabledbooleanfalseNo전체 비활성화
requiredbooleanfalseNo필수 입력 여부

RadioOption 타입

PropTypeDefaultRequiredDescription
valuestring-Yes옵션 값
labelstring-Yes표시 라벨
descriptionstring-No설명 텍스트
disabledboolean-No개별 옵션 비활성화

기본

알림 설정

Sizes

Small
Default
Large

설명 텍스트

요금제 선택서비스 이용에 적합한 요금제를 선택하세요

기본 기능 무료 제공

월 9,900원, 모든 기능 이용 가능

맞춤 가격, 전용 지원 제공

가로 배치

성별

필수 입력

서비스 이용 동의*

비활성화

전체 비활성화
개별 비활성화

실제 사용 예시

결제 수단 선택

Visa, Mastercard, 국내 모든 카드

실시간 계좌이체

SKT, KT, LG U+

간편하게 결제하세요