feat: Support multiple errors

1 files changed, 9 insertions, 3 deletions

diff --git a/code/app/src/lib/components/input.svelte b/code/app/src/lib/components/input.svelte
index 5d38597..ac01348 100644
--- a/code/app/src/lib/components/input.svelte
+++ b/code/app/src/lib/components/input.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import pwKey from "$actions/pwKey";
     import { random_string } from "$lib/helpers";
-    import { htmlLangAttributeDetector } from "typesafe-i18n/detectors";
     import { ExclamationCircleIcon } from "./icons";
 
     export let label: string | undefined = undefined;
@@ -13,6 +12,7 @@
     export let placeholder: string | undefined = undefined;
     export let helpText: string | undefined = undefined;
     export let errorText: string | undefined = undefined;
+    export let errors: Array<string> | undefined = undefined;
     export let disabled = false;
     export let hideLabel = false;
     export let cornerHint: string | undefined = undefined;
@@ -98,9 +98,15 @@
             {helpText}
         </p>
     {/if}
-    {#if errorText}
+    {#if errorText || errors?.length === 1}
         <p class="mt-2 text-sm text-red-600" id={ariaErrorDescribedBy}>
-            {errorText}
+            {errorText ?? errors[0]}
         </p>
+    {:else if errors && errors.length}
+        <ul class="mt-2 list-disc" id={ariaErrorDescribedBy}>
+            {#each errors as error}
+                <li class="text-sm text-red-600">{error}</li>
+            {/each}
+        </ul>
     {/if}
 </div>