aboutsummaryrefslogtreecommitdiffstats
path: root/code/app/src/components/checkbox.svelte
diff options
context:
space:
mode:
authorivarlovlie <git@ivarlovlie.no>2023-02-25 13:15:44 +0100
committerivarlovlie <git@ivarlovlie.no>2023-02-25 13:15:44 +0100
commit900bb5e845c3ad44defbd427cae3d44a4a43321f (patch)
treedf3d96a93771884add571e82336c29fc3d9c7a1c /code/app/src/components/checkbox.svelte
downloadgreatoffice-900bb5e845c3ad44defbd427cae3d44a4a43321f.tar.xz
greatoffice-900bb5e845c3ad44defbd427cae3d44a4a43321f.zip
feat: Initial commit
Diffstat (limited to 'code/app/src/components/checkbox.svelte')
-rw-r--r--code/app/src/components/checkbox.svelte29
1 files changed, 29 insertions, 0 deletions
diff --git a/code/app/src/components/checkbox.svelte b/code/app/src/components/checkbox.svelte
new file mode 100644
index 0000000..db72bee
--- /dev/null
+++ b/code/app/src/components/checkbox.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+ import pwKey from "$actions/pwKey";
+ import {random_string} from "$utilities/misc-helpers";
+
+ export let label: string;
+ export let id: string | undefined = "input__" + random_string(4);
+ export let name: string | undefined = undefined;
+ export let disabled: boolean | null = null;
+ export let checked: boolean;
+ export let required: boolean | null = null;
+ export let _pwKey: string | undefined = undefined;
+</script>
+
+<div class="flex items-center">
+ <input
+ {name}
+ use:pwKey={_pwKey}
+ {disabled}
+ {id}
+ {required}
+ type="checkbox"
+ bind:checked
+ class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded"
+ />
+ <label for={id} class="ml-2 block text-sm text-gray-900">
+ {@html required ? "<span class='text-red-500'>*</span>" : ""}
+ {label}
+ </label>
+</div>