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 let inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`
19</script>
20
21<div class="field">
22 {#if label}
23 <label for={inputId}>{label}</label>
24 {/if}
25 <input id={inputId} class:has-error={!!error} {...rest} />
26 {#if error}
27 <span class="hint error">{error}</span>
28 {:else if hint}
29 <span class="hint">{hint}</span>
30 {/if}
31</div>
32
33<style>
34 .has-error {
35 border-color: var(--error-text);
36 }
37
38 .has-error:focus {
39 border-color: var(--error-text);
40 box-shadow: 0 0 0 2px var(--error-bg);
41 }
42</style>