ScRadio

ScRadio는 단일 선택을 위한 라디오 버튼 컴포넌트입니다.
v-model을 통해 선택된 값을 바인딩하며, 기본 라벨 또는 커스텀 슬롯으로 텍스트를 표시할 수 있습니다.

✅ 기본 사용법

TrueFalse

결과 : false

<div>
  <sc-radio v-model="value" :value="true">True</sc-radio>
  <sc-radio v-model="value" :value="false">False</sc-radio>
</div>

<div class="text-sm mt-5">결과 : {{ value }}</div>

<script setup>
const value = ref(false);
</script>

---

✨ 사용 예시 모음

▸ v-for 사용

CockatooMagpie GooseLittle KingfisherRichard's Pipit

결과 :

<div class="mt-5">
  <sc-radio v-for="item in items" :key="item.value"
    v-model="value2" :value="item.value">
    {{ item.text }}
  </sc-radio>
</div>

<div class="text-sm mt-5">결과 : {{ value2 }}</div>

<script setup>
const items = ref([
  { value: 'COC', text: 'Cockatoo' },
  { value: 'MAG', text: 'Magpie Goose' },
  { value: 'LIT', text: 'Little Kingfisher' },
  { value: 'RIC', text: "Richard's Pipit" },
]);
</script>

▸ 사이즈 size

TrueFalse

TrueFalse

<div class="mt-5">
  <sc-radio v-model="value" :value="true" size="small">True</sc-radio>
  <sc-radio v-model="value" :value="false" size="small">False</sc-radio>
</div>
<div class="mt-5">
  <sc-radio v-model="value" :value="true" size="medium">True</sc-radio>
  <sc-radio v-model="value" :value="false" size="medium">False</sc-radio>
</div>

---

▸ 비활성화 disabled

TrueFalse

<div class="mt-5">
  <sc-radio v-model="value" :value="true" disabled>True</sc-radio>
  <sc-radio v-model="value" :value="false" disabled>False</sc-radio>
</div>

---

▸ 색상 및 타입

TrueFalse

TrueFalse

TrueFalse

TrueFalse

<div class="mt-5">
  <sc-radio v-model="value" :value="true" color="black">True</sc-radio>
  <sc-radio v-model="value" :value="false" color="black">False</sc-radio>
</div>
<div class="mt-5">
  <sc-radio v-model="value" :value="true" disabled color="black">True</sc-radio>
  <sc-radio v-model="value" :value="false" disabled color="black">False</sc-radio>
</div>
<div class="mt-5">
  <sc-radio v-model="value" :value="true" color="black" type="circle">True</sc-radio>
  <sc-radio v-model="value" :value="false" color="black" type="circle">False</sc-radio>
</div>
<div class="mt-5">
  <sc-radio v-model="value" :value="true" disabled color="black" type="circle">True</sc-radio>
  <sc-radio v-model="value" :value="false" disabled color="black" type="circle">False</sc-radio>
</div>

---

🛠️ 속성 (Props)

이름	타입	기본값	설명
modelValue	string | number | boolean	''	선택된 값 (v-model)
value	string | number | boolean	undefined	항목의 고유 값
label	string	''	표시할 텍스트 라벨
disabled	boolean	false	선택 불가능하게 설정 여부
type	'default' | 'circle'	'default'	라디오 스타일 타입 (circle 등)
color	string	'primary'	색상 클래스 (primary, black)
size	'small' | 'medium'	'medium'	크기 지정

---

📤 이벤트 (Emits)

이벤트 이름	설명
update:modelValue	선택된 값 변경 시 발생

---

🔳 슬롯 (Slots)

슬롯 이름	설명
default	커스텀 라벨 콘텐츠를 표시할 때 사용

---

🎨 스타일 클래스

클래스 이름	설명
sc-radio	전체 라디오 버튼 컨테이너
sc-radio--disabled	비활성화 상태 클래스
sc-radio--circle	원형 스타일 클래스
sc-radio--small	작은 크기 스타일
sc-radio--medium	기본 크기 스타일
sc-radio--primary 등	색상 클래스 (color 값 기반)

---

📝 기타 참고사항

• type="circle" 설정 시 라디오 외형이 원형으로 바뀝니다.

---