Radio

• 라디오 버튼은 사용자가 여러 개의 옵션 중 하나만 선택할 수 있도록 하는 인터페이스 요소입니다.
• 라디오 버튼을 통해 사용자는 주어진 선택지 중에서 단 하나의 옵션을 선택할 수 있으며, 하나의 옵션을 선택하면 다른 옵션은 자동으로 해제됩니다.

Group

Cheese

Potato

Bulgogi

Pepperoni

<script setup lang="ts">
import { ref } from "vue";
import { RadioButton } from "@jennifersoft/vue-components-v2";
const pizzaValue = ref("Cheese");
</script>
<template>
    <div>
        <div class="flex items-center gap-2">
            <radio-button v-model="pizzaValue" name="pizza" value="Cheese"/>
            <label>
                Cheese
            </label>
        </div>
        <div class="flex items-center gap-2">
            <radio-button v-model="pizzaValue" name="pizza" value="Potato"/>
            <label>
                Potato
            </label>
        </div>
        <div class="flex items-center gap-2">
            <radio-button v-model="pizzaValue" name="pizza" value="Bulgogi"/>
            <label>
                Bulgogi
            </label>
        </div>
        <div class="flex items-center gap-2">
            <radio-button v-model="pizzaValue" name="pizza" value="Pepperoni"/>
            <label>
                Pepperoni
            </label>
        </div>
        
    </div>
    
</template>

States

Default

Disabled

<script setup lang="ts">
import { ref } from "vue";
import { RadioButton } from "@jennifersoft/vue-components-v2";
const defaultValue = ref("true");
const disabledValue = ref("true");
</script>
<template>
    <div>
        <div class="flex flex-col items-center flex-gap-2">
            <label>
                Default
            </label>
            <radio-button v-model="defaultValue" name="default" value="true" />
            <radio-button v-model="defaultValue" name="default" value="false" />
        </div>
        <div class="flex flex-col items-center flex-gap-2">
            <label>
                Disabled
            </label>
            <radio-button v-model="disabledValue" name="disable" value="true" :disabled="true"/>
            <radio-button v-model="disabledValue" name="disable" value="false" :disabled="true" />
        </div>
    </div>
    
</template>