Radio-Group

여러 개의 라디오 버튼을 그룹으로 묶어 하나의 값을 선택할 수 있게 해주는 컴포넌트입니다. v-model을 통해 선택된 값을 바인딩하며, 옵션별 비활성화 및 전체 그룹 비활성화, 에러 메시지 표시 등 다양한 기능을 제공합니다.

이 컴포넌트는 내부적으로 <el-radio>을 사용하고 있으며, 해당 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

props

Prop 이름	타입	기본값	설명
model-value	any	null	선택된 라디오 값 (v-model 사용)
options	Array	[]	라디오 항목 배열. 각 항목은 label, value, disabled 포함 가능
error	Boolean	false	에러 상태 여부. true일 경우 error-message 출력
error-message	String	null	에러 메시지 텍스트
disabled	Boolean	false	전체 라디오 그룹 비활성화 여부

기본

기본 사용

옵션 A옵션 B옵션 C

<nv-radio-group
    v-model="selectedValue"
    :options="radioOptions"
/>

<script setup>
import {ref} from "vue";

const selectedValue = ref(null)

const radioOptions = [
    { label: '옵션 A', value: 'A' },
    { label: '옵션 B', value: 'B' },
    { label: '옵션 C', value: 'C', disabled: true }
]
</script>

에러 메시지 표시

에러 메시지 표시

옵션 A옵션 B옵션 C

에러 메시지를 표시합니다.

<nv-radio-group
    v-model="selectedValue"
    :options="radioOptions"
    error
    error-message="에러 메시지."
/>

전체 라디오 그룹 비활성화

전체 라디오 그룹 비활성화

옵션 A옵션 B옵션 C

<nv-radio-group
    v-model="selectedValue"
    :options="radioOptions"
    :disabled="true"
/>

옵션 객체 구조

{
    label: '옵션 표시 텍스트',
    value: '옵션 값',
    disabled: true
}