KRDS React

라디오 버튼 Radio button ​

라디오 버튼은 사용자가 여러 개의 옵션 중 하나만 선택할 수 있도록 하는 경우에 사용한다. 즉, 라디오 버튼 옵션의 선택은 상호배타적이므로 한 개의 옵션을 선택하면 다른 옵션은 자동으로 선택 해제된다.

KRDS 가이드

기본 ​

tsx
import { Radio, RadioGroup } from '@krds.ui/react'

export default function RadioDemo() {
  return (
    <RadioGroup name="auth" defaultValue="phone">
      <Radio value="phone">휴대폰 인증</Radio>
      <Radio value="cert">공동인증서</Radio>
    </RadioGroup>
  )
}

라디오 칩 ​

tsx
import { RadioChip } from '@krds.ui/react'

export default function RadioChipDemo() {
  return (
    <RadioChip name="filter" value="all">
      전체
    </RadioChip>
  )
}

Radio ​

Props

이름타입기본값설명
sizeRadioSizemedium라디오 버튼 크기
descriptionstring-추가 설명 텍스트
defaultCheckedboolean-비제어 상태에서 사용할 초기 체크 상태

RadioGroup ​

Props

이름타입기본값설명
valuestring-라디오 그룹의 값 (controlled mode)
defaultValuestring-초기 값 (uncontrolled mode)
onChange((value: string) => void)-값이 변경될 때 호출되는 콜백
name (필수)string-라디오 그룹의 이름 (name 속성)
children (필수)ReactNode-자식 요소들
classNamestring-추가 CSS 클래스
columnbooleanfalse세로 배치 여부

RadioChip ​

Props

이름타입기본값설명
sizeRadioChipSizemedium라디오 칩 크기
defaultCheckedboolean-비제어 상태에서 사용할 초기 체크 상태