Radio 라디오 버튼

단독 사용 (v-model이 자체 value와 일치) 또는 그룹 사용 (LhRadioGroup이 선택 값을 관리)이 가능합니다.

라디오 버튼

<template>
  <div class="demo-col" style="gap: 18px">
    <div>
      <LhRadioGroup v-model="style" name="painting-style">
        <LhRadio label="공필" value="gongbi" />
        <LhRadio label="사의" value="xieyi" />
        <LhRadio label="발묵" value="pomo" disabled />
      </LhRadioGroup>
    </div>
    <div>
      <LhRadioGroup v-model="style" disabled>
        <LhRadio label="공필" value="gongbi" />
        <LhRadio label="사의" value="xieyi" />
      </LhRadioGroup>
      <p class="demo-note">그룹 전체 disabled</p>
    </div>
    <div class="demo-row" style="gap: 20px; flex-wrap: wrap; align-items: center">
      <LhRadioGroup v-model="style" size="small">
        <LhRadio label="공필" value="gongbi" />
      </LhRadioGroup>
      <LhRadioGroup v-model="style" size="large">
        <LhRadio label="공필" value="gongbi" />
      </LhRadioGroup>
    </div>
    <div>
      <LhRadio v-model="standalone" label="단독 라디오 (value 전달)" :value="true" />
      <p class="demo-note">현재 화풍: {{ style }}, 단독 값: {{ String(standalone) }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ style: 'xieyi', standalone: false }),
}
</script>

Radio Props

프로퍼티	설명	타입	기본값
v-model	선택 시 값 (model: modelValue/input)	unknown	—
value	이 라디오 버튼의 값	unknown	—
label	문구 (또는 기본 슬롯 사용)	string	—
disabled / size / name	—	—	—

RadioGroup Props

프로퍼티	설명	타입	기본값
v-model	그룹 선택 값	unknown	—
disabled / size / name	하위 항목에 적용	—	—

이벤트

이벤트	설명	콜백 매개변수
input	v-model 이벤트	—
change	선택 값이 변경될 때 발생	(value)

disabled 상태에서는 change가 차단됩니다.