Files
pocket-id/frontend/src/lib/components/form-input.svelte
Elias Schneider eaff977b22 initial commit
2024-08-12 11:24:22 +02:00

31 lines
646 B
Svelte

<script lang="ts">
import { Label } from '$lib/components/ui/label';
import type { FormInput } from '$lib/utils/form-util';
import type { Snippet } from 'svelte';
import { Input } from './ui/input';
let {
input = $bindable(),
label,
children
}: {
input: FormInput<string | boolean | number>;
label: string;
children?: Snippet;
} = $props();
const id = label.toLowerCase().replace(/ /g, '-');
</script>
<div>
<Label for={id}>{label}</Label>
{#if children}
{@render children()}
{:else}
<Input {id} bind:value={input.value} />
{/if}
{#if input.error}
<p class="text-sm text-red-500">{input.error}</p>
{/if}
</div>