From d520d8830151c606251b6eeaf7aaea26e3eb6610 Mon Sep 17 00:00:00 2001
From: Richard Palethorpe <io@richiejp.com>
Date: Wed, 26 Mar 2025 09:11:03 +0000
Subject: [PATCH] feat(ui): Add required indicator to form field

---
 .../react-ui/src/components/common/FormField.jsx  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/webui/react-ui/src/components/common/FormField.jsx b/webui/react-ui/src/components/common/FormField.jsx
index f5736d1..6f9e821 100644
--- a/webui/react-ui/src/components/common/FormField.jsx
+++ b/webui/react-ui/src/components/common/FormField.jsx
@@ -25,6 +25,13 @@ const FormField = ({
   options = [],
   required = false,
 }) => {
+  // Create label with required indicator
+  const labelWithIndicator = required ? (
+    <>{label} <span style={{ color: 'var(--danger)' }}>*</span></>
+  ) : (
+    label
+  );
+
   // Render different input types
   const renderInput = () => {
     switch (type) {
@@ -38,7 +45,7 @@ const FormField = ({
                 checked={value === true || value === 'true'}
                 onChange={(e) => onChange(e.target.checked ? 'true' : 'false')}
               />
-              {label}
+              {labelWithIndicator}
             </label>
             {helpText && <small className="form-text text-muted d-block">{helpText}</small>}
           </div>
@@ -46,7 +53,7 @@ const FormField = ({
       case 'select':
         return (
           <>
-            <label htmlFor={id}>{label}</label>
+            <label htmlFor={id}>{labelWithIndicator}</label>
             <select
               id={id}
               value={value || ''}
@@ -66,7 +73,7 @@ const FormField = ({
       case 'textarea':
         return (
           <>
-            <label htmlFor={id}>{label}</label>
+            <label htmlFor={id}>{labelWithIndicator}</label>
             <textarea
               id={id}
               value={value || ''}
@@ -81,7 +88,7 @@ const FormField = ({
       default:
         return (
           <>
-            <label htmlFor={id}>{label}</label>
+            <label htmlFor={id}>{labelWithIndicator}</label>
             <input
               type={type}
               id={id}