.

1 files changed, 14 insertions, 7 deletions

diff --git a/code/app/src/lib/components/textarea.svelte b/code/app/src/lib/components/textarea.svelte
index 65127af..6629260 100644
--- a/code/app/src/lib/components/textarea.svelte
+++ b/code/app/src/lib/components/textarea.svelte
@@ -9,27 +9,31 @@
     export let placeholder = "";
     export let value;
     export let label = "";
+    export let required = false;
     export let errorText = "";
 
-    $: shared_props = {
+    $: attributes = {
         rows: rows || null,
         cols: cols || null,
         name: name || null,
         id: id || null,
         disabled: disabled || null,
+        required: required || null,
     };
 
-    let textarea;
+    let textareaElement;
     let scrollHeight = 0;
     const defaultColorClass = "border-gray-300 focus:border-teal-500 focus:ring-teal-500";
     let colorClass = defaultColorClass;
+    
     $: if (errorText) {
         colorClass = "placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500 text-red-900 pr-10 border-red-300";
     } else {
         colorClass = defaultColorClass;
     }
-    $: if (textarea) {
-        scrollHeight = textarea.scrollHeight;
+
+    $: if (textareaElement) {
+        scrollHeight = textareaElement.scrollHeight;
     }
 
     function on_input(event) {
@@ -40,17 +44,20 @@
 
 <div>
     {#if label}
-        <label for={id} class="block text-sm font-medium text-gray-700">{label}</label>
+        <label for={id} class="block text-sm font-medium text-gray-700">
+            {label}
+            {@html required ? "<span class='text-red-500'>*</span>" : ""}
+        </label>
     {/if}
     <div class="mt-1">
         <textarea
             {rows}
             {name}
             {id}
-            {...shared_props}
+            {...attributes}
             style="overflow-y:hidden;min-height:calc(1.5em + .75rem + 2px);{scrollHeight ? 'height:{scrollHeight}px' : ''};"
             bind:value
-            bind:this={textarea}
+            bind:this={textareaElement}
             on:input={on_input}
             {placeholder}
             class="block w-full rounded-md {colorClass} shadow-sm sm:text-sm"