Checkbox Input
This page Show an Example of a Reusable Checkbox Input Component.
First Pattern
Demo
With default Value
value is: false
With Custom Value
value is: []
Disabled State
value is: []
Dependencies
{
"tailwindcss": "^3.3.2", // for styling
}Code
vue
<script setup lang="ts">
import { computed } from "vue";
const props = defineProps<{
modelValue?: any;
value?: any;
required?: boolean;
name?: string;
label?: string;
disabled?: boolean;
variant?: string; // this is based on your needs, not implemented here
size?: string; // based on your needs, not implemented here
}>();
const emit = defineEmits<{
(event: "update:modelValue", data: any): void;
}>();
const checked = computed({
get() {
return props.modelValue;
},
set(newValue) {
emit("update:modelValue", newValue);
},
});
</script>
<template>
<!-- style to fit your needs base on the states -->
<label class="flex space-x-3 text-sm text-black dark:text-white w-fit">
<input
class="disabled:cursor-not-allowed peer"
type="checkbox"
v-model="checked"
:name="name"
:id="name"
:value="value"
:required="required"
:disabled="disabled"
/>
<p class="cursor-pointer peer-disabled:cursor-not-allowed" v-if="label">
{{ label }}
</p>
</label>
</template>vue
<script setup lang="ts">
import { ref } from "vue";
import Checkbox1 from "../components/Checkbox/Checkbox1.vue";
const checked = ref(false);
const customChecked = ref([]);
</script>
<template>
<div class=" p-3 mt-4">
<div>
<p class="underline">With default Value</p>
<Checkbox1
v-model="checked"
label="click me to toggle"
name="checkboxName"
/>
<p>value is: {{ checked }}</p>
</div>
<div>
<p class="underline">With Custom Value</p>
<Checkbox1
v-model="customChecked"
:value="{ name: 'jimohSodiq' }"
label="click me to toggle"
/>
<p>value is: {{ customChecked }}</p>
</div>
<div>
<p class="underline">Disabled State</p>
<Checkbox1
disabled
v-model="customChecked"
:value="{ name: 'Foo' }"
label="click me to toggle"
/>
<p>value is: {{ customChecked }}</p>
</div>
</div>
</template>