Something went wrong. Try again.
Our Personal Data Server from scratch!
Something went wrong. Try again.
713 B · 34 lines
Svelte
1234567891011121314151617181920212223242526272829303132333435<script lang="ts"> import type { HTMLInputAttributes } from 'svelte/elements'
interface Props extends HTMLInputAttributes { label?: string hint?: string error?: string value?: string }
let { label, hint, error, id, value = $bindable(''), ...rest }: Props = $props()
const fallbackId = `input-${Math.random().toString(36).slice(2, 9)}` let inputId = $derived(id || fallbackId)</script>
<div> {#if label} <label for={inputId}>{label}</label> {/if} <input id={inputId} class:has-error={!!error} bind:value {...rest} /> {#if error} <span class="hint error">{error}</span> {:else if hint} <span class="hint">{hint}</span> {/if}</div>