20 lines
839 B
Svelte
20 lines
839 B
Svelte
<script lang="ts">
|
|
export let id: string | undefined = undefined;
|
|
export let name: string | undefined = undefined;
|
|
export let checked: boolean = false;
|
|
</script>
|
|
|
|
<label class="h-fit relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
{id}
|
|
{name}
|
|
{checked}
|
|
type="checkbox"
|
|
value="true"
|
|
class="sr-only peer"
|
|
on:change={(e) => {
|
|
e.currentTarget.value = e.currentTarget.checked ? 'true' : 'false';
|
|
}} />
|
|
<div
|
|
class="w-11 h-6 bg-button-secondary-active-solid hover:bg-button-secondary-selected peer-checked:hover:bg-accent-hover peer-checked:bg-accent rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-icon-active after:rounded-full after:h-5 after:w-5 after:transition-all transition-colors" />
|
|
</label>
|