Add for attribute for field forms

opengento · Feb 6, 2025 · e5e785d · e5e785d
1 parent 5fbad17
commit e5e785d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/components/Form/Field/Field.tsx b/src/components/Form/Field/Field.tsx
@@ -31,10 +31,21 @@ const inputClass = {
   top: 'block w-full'
 };
 
-const Field = ({ variant = 'input', label, labelPosition = 'top', id, name, type, required, placeholder, value, className }: Field) => {
+const Field = ({
+  variant = 'input',
+  label,
+  labelPosition = 'top',
+  id,
+  name,
+  type,
+  required,
+  placeholder,
+  value,
+  className
+}: Field) => {
   return (
     <div className={classNames(wrapperClass[labelPosition], className)}>
-      <Label required={required} className={labelClass[labelPosition]}>
+      <Label required={required} id={id} className={labelClass[labelPosition]}>
         {label}
       </Label>
       <Input

diff --git a/src/components/Form/Label/Label.tsx b/src/components/Form/Label/Label.tsx
@@ -3,13 +3,14 @@ import classNames from "classnames";
 
 interface Label {
   required: boolean;
+  id?: string;
   className?: string;
   children?: ReactNode;
 }
 
-const Label = ({ required, className, children }: Label) => {
+const Label = ({ required, id, className, children }: Label) => {
   return (
-    <label className={classNames(
+    <label htmlFor={id} className={classNames(
       "text-base font-semibold",
       className
     )}>

diff --git a/src/layouts/Form/ContactForm.tsx b/src/layouts/Form/ContactForm.tsx
@@ -22,26 +22,30 @@ const ContactForm = ({ action }: Contact) => {
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
         <Field
           label={t('common:Name')}
+          id="name"
           name="Name_First"
           type="text"
           required={true}
           placeholder={t('common:fullname')}
         />
         <Field
           label={t('common:Email')}
+          id="email"
           name="Email"
           type="email"
           required={true}
         />
         <Field
           label={t('common:Objet')}
+          id="object"
           name="SingleLine"
           type="text"
           required={true}
           className="lg:col-span-2"
         />
         <Field
           label={t('common:Message')}
+          id="message"
           name="MultiLine"
           variant="textarea"
           required={true}
@@ -52,6 +56,7 @@ const ContactForm = ({ action }: Contact) => {
           <Field
             label={t('common:agreeTerms')}
             labelPosition="right"
+            id="terms"
             name="TermsConditions"
             type="checkbox"
             required={true}