this repo has no description
lewis.moe
1<script lang="ts">
2 import type { HTMLInputAttributes } from 'svelte/elements'
3
4 interface Props extends HTMLInputAttributes {
5 label?: string
6 hint?: string
7 error?: string
8 }
9
10 let {
11 label,
12 hint,
13 error,
14 id,
15 ...rest
16 }: Props = $props()
17
18 const fallbackId = `input-${Math.random().toString(36).slice(2, 9)}`
19 let inputId = $derived(id || fallbackId)
20</script>
21
22<div class="field">
23 {#if label}
24 <label for={inputId}>{label}</label>
25 {/if}
26 <input id={inputId} class:has-error={!!error} {...rest} />
27 {#if error}
28 <span class="hint error">{error}</span>
29 {:else if hint}
30 <span class="hint">{hint}</span>
31 {/if}
32</div>
33
34<style>
35 .has-error {
36 border-color: var(--error-text);
37 }
38
39 .has-error:focus {
40 border-color: var(--error-text);
41 box-shadow: 0 0 0 2px var(--error-bg);
42 }
43</style>