52 lines
1.1 KiB
Svelte
52 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
id?: string;
|
|
checked?: boolean | null;
|
|
required?: boolean;
|
|
validation?: {
|
|
hint: string;
|
|
};
|
|
disabled?: boolean;
|
|
|
|
label?: Snippet | string;
|
|
notice?: Snippet;
|
|
}
|
|
|
|
let { id, checked = $bindable(), required, validation, disabled, label, notice }: Props = $props();
|
|
</script>
|
|
|
|
<fieldset class="fieldset">
|
|
<div class="flex items-center">
|
|
<input
|
|
{id}
|
|
name={id}
|
|
bind:checked
|
|
type="checkbox"
|
|
class="checkbox"
|
|
class:validator={required || validation}
|
|
required={required ? true : null}
|
|
disabled={disabled ? true : null}
|
|
/>
|
|
<span class="ml-1">
|
|
{#if typeof label === 'string'}
|
|
<span>{label}</span>
|
|
{:else if label}
|
|
{@render label()}
|
|
{/if}
|
|
{#if required}
|
|
<span class="text-red-700">*</span>
|
|
{/if}
|
|
</span>
|
|
</div>
|
|
<p class="fieldset-label">
|
|
{#if notice}
|
|
{@render notice()}
|
|
{/if}
|
|
</p>
|
|
{#if validation}
|
|
<p class="validator-hint mt-0">{validation.hint}</p>
|
|
{/if}
|
|
</fieldset>
|