Radio 라디오 버튼

여러 후보 항목 중 하나를 선택하며, 단독 사용과 LhRadioGroup 조합 사용을 지원합니다.

기본 사용법

그룹 라디오

수묵단청여백공필(비활성화)

선택됨: ink

import { useState } from 'react'
import { LhRadio, LhRadioGroup } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('ink')

  return (
    <LhRadioGroup value={value} onChange={(val) => setValue(val as string)}>
      <LhRadio value="ink">수묵</LhRadio>
      <LhRadio value="danqing">단청</LhRadio>
      <LhRadio value="blank">여백</LhRadio>
    </LhRadioGroup>
  )
}

Radio Props

프로퍼티	설명	타입	옵션	기본값
value	옵션 값(필수)	unknown	—	—
checked	제어형 선택 상태(단독 사용 시)	boolean	—	—
defaultChecked	비제어 기본 선택	boolean	—	false
label	표시 텍스트	string	—	—
disabled	비활성화	boolean	—	false
size	크기	'large' | 'middle' | 'small'	—	ConfigProvider 따름
name	네이티브 name 속성(Group이 전달)	string	—	—
sx	간편 레이아웃 프로퍼티	SxProps	—	—

Radio 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onChange	선택 시 발생(2개 매개변수)	(checked: boolean, event: ChangeEvent) => void	@change

RadioGroup Props

프로퍼티	설명	타입	기본값
value	제어형 선택값	unknown	—
defaultValue	비제어 기본값	unknown	—
disabled	모든 자식 항목 비활성화	boolean	false
size	자식 항목 크기	'large' | 'middle' | 'small'	ConfigProvider 따름
name	자식 항목에 전달할 네이티브 name	string	—

RadioGroup 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onChange	선택 변경. 콜백 매개변수는 옵션의 value	(value: unknown) => void	@change

onChange 매개변수 차이

LhRadio의 onChange 콜백은 (checked, event)이고, LhRadioGroup의 onChange 콜백은 선택한 항목의 value입니다 — CheckboxGroup과 일치합니다.

스타일

import '@lh-ui/react/style/radio'