aboutsummaryrefslogtreecommitdiffstats
path: root/components/Control/Checkbox.vue
diff options
context:
space:
mode:
authorLeonardo Bishop <me@leonardobishop.com>2024-03-10 00:13:25 +0000
committerLeonardo Bishop <me@leonardobishop.com>2024-03-10 00:13:25 +0000
commit9a11e0f4a38297006b89cc7bb2a60734111582e0 (patch)
tree5ebddde79e67b659714b5dbdbfcea289f06a4ae5 /components/Control/Checkbox.vue
parent817478f3cf357fc09778d9dc3cf67a667e21f042 (diff)
Migrate to nuxt
Diffstat (limited to 'components/Control/Checkbox.vue')
-rw-r--r--components/Control/Checkbox.vue42
1 files changed, 42 insertions, 0 deletions
diff --git a/components/Control/Checkbox.vue b/components/Control/Checkbox.vue
new file mode 100644
index 0000000..e0325e7
--- /dev/null
+++ b/components/Control/Checkbox.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const model = defineModel();
+
+defineProps({
+ id: String,
+ label: String,
+ description: String,
+});
+
+</script>
+
+<template>
+ <div class="checkbox">
+ <label id="wrapper" :for="id">
+ <input :id="id" type="checkbox" v-model="model" />
+ <span id="label">{{ label }}</span>
+ <span id="description">{{ description }}</span>
+ </label>
+ </div>
+</template>
+
+<style scoped>
+#label {
+ display: block;
+ font-weight: bold;
+}
+
+#description {
+ display: block;
+ font-size: 0.8em;
+}
+
+input {
+ float: left;
+ margin: 5px 0 0 -20px;
+}
+
+.checkbox {
+ padding: 0 0 0 20px;
+}
+
+</style> \ No newline at end of file