aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Control/Checkbox.vue
diff options
context:
space:
mode:
authorLeonardo Bishop <me@leonardobishop.com>2024-02-15 14:01:30 +0000
committerLeonardo Bishop <me@leonardobishop.com>2024-02-15 14:01:30 +0000
commit2aca4247c5d0c7061a300517178dd31316b65fab (patch)
tree10e145c2b57d76c778bdf1a11191495dcfe191f3 /src/components/Control/Checkbox.vue
Initial commit
Diffstat (limited to 'src/components/Control/Checkbox.vue')
-rw-r--r--src/components/Control/Checkbox.vue42
1 files changed, 42 insertions, 0 deletions
diff --git a/src/components/Control/Checkbox.vue b/src/components/Control/Checkbox.vue
new file mode 100644
index 0000000..e0325e7
--- /dev/null
+++ b/src/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