Improve required fields

v3xlabs · Dec 18, 2024 · c33948b · c33948b
1 parent 7115e4d
commit c33948b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/web/src/components/input/BaseInput.tsx b/web/src/components/input/BaseInput.tsx
@@ -22,13 +22,25 @@ export const BaseInput = ({
     errorMessage,
     description,
     width = 'fit',
+    required,
     ...rest
 }: BaseInputProperties) => {
     const id = useId();
 
     return (
         <div className="space-y-2 w-full">
-            {label && <Label htmlFor={id}>{label}</Label>}
+            {label && (
+                <Label htmlFor={id}>
+                    {label}
+                    {required && (
+                        <span
+                            className={clsx('', errorMessage && 'text-red-500')}
+                        >
+                            *
+                        </span>
+                    )}
+                </Label>
+            )}
             <div
                 className={clsx(
                     'flex items-stretch justify-start gap-2',
@@ -44,6 +56,7 @@ export const BaseInput = ({
                             width === 'full' && 'w-full'
                         )}
                         onChange={(event) => onChange?.(event.target.value)}
+                        required={required}
                         {...rest}
                     />
                 </div>

diff --git a/web/src/routes/settings/fields/index.tsx b/web/src/routes/settings/fields/index.tsx
@@ -82,12 +82,14 @@ const FieldDefinitionEditor = ({
                     <BaseInput
                         label="Definition ID"
                         name="definition_id"
+                        placeholder="battery_capacity"
                         value={field.state.value}
                         onChange={field.handleChange}
                         onBlur={field.handleBlur}
                         width="full"
                         readOnly={!!fieldDef}
                         errorMessage={field.state.meta.errors.join(', ')}
+                        required
                     />
                 )}
             </form.Field>
@@ -105,11 +107,13 @@ const FieldDefinitionEditor = ({
                     <BaseInput
                         label="Name"
                         name="name"
+                        placeholder="Battery Capacity"
                         value={field.state.value}
                         onChange={field.handleChange}
                         onBlur={field.handleBlur}
                         width="full"
                         errorMessage={field.state.meta.errors.join(', ')}
+                        required
                     />
                 )}
             </form.Field>
@@ -119,6 +123,7 @@ const FieldDefinitionEditor = ({
                     <BaseInput
                         label="Description"
                         name="description"
+                        placeholder="The capacity of the battery in mAh"
                         value={field.state.value}
                         onChange={field.handleChange}
                         onBlur={field.handleBlur}
@@ -133,6 +138,7 @@ const FieldDefinitionEditor = ({
                     <BaseInput
                         label="Placeholder"
                         name="placeholder"
+                        placeholder="Capacity (ex 500mAh)"
                         value={field.state.value}
                         onChange={field.handleChange}
                         onBlur={field.handleBlur}