Checkbox

• 체크박스는 사용자가 여러 개의 옵션 중에서 하나 이상을 선택할 수 있도록 하는 인터페이스 요소입니다.
• 체크박스를 통해 사용자는 개별적인 항목을 활성화하거나 비활성화할 수 있으며, 각 항목을 클릭하면 해당 옵션이 선택되거나 해제됩니다.
• 체크박스는 보통 리스트나 폼에서 여러 선택지를 제공할 때 사용되며, 선택된 항목 옆에 체크 표시가 나타나 사용자가 선택 상태를 쉽게 확인할 수 있습니다.

Group

Cheese

Potato

Bulgogi

Pepperoni

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

default

<script setup lang="ts">
import { Checkbox } from '@jennifersoft/vue-components-v2';
const checked = ref(true);
</script>
<template>
    <checkbox v-model="checked" />
</template>

indeterminate

<script setup lang="ts">
import { Checkbox } from '@jennifersoft/vue-components-v2';
const checked = ref(true);
</script>
<template>
    <checkbox v-model="checked" :indeterminate="true" />
</template>

disabled

<script setup lang="ts">
import { Checkbox } from '@jennifersoft/vue-components-v2';
const checked = ref(true);
</script>
<template>
    <checkbox v-model="checked" :disabled="ture" />
    <checkbox v-model="checked" :indeterminate="true" :disabled="ture" />
</template>