Form Components

Email input

<EmailInput
fieldName="email"
label="Email Address"
placeHolder="Enter Email Address"
register={register}
errors={errors}
isRequired
className={styles.emailbox}
labelstyle={styles.labeltext}
/>

prop	description	required	default
fieldName	field name of the form element to be registered	true	None
register	This method allows you to register an input or select element and apply validation rules to React Hook Form. Validation rules are all based on the HTML standard and also allow for custom validation methods.	true	none
errors	This prop includes errors if any, for the form element	true	None
placeHolder	Placeholder to be displayed inside email element	false	Enter Email
label	Label to be displayed beside email element	false	Email
className	class name for the element	true	None
isRequired	defines whether the element is required for the form submission	false	false
labelstyle	class name for the label	true	None
classNamedark	class name for the element in dark mode	false	null
labeldarkstyle	class name for the element label in dark mode	false	null

TextInput

<TextInput
className={styles.inputbox}
classNamedark={styles.inputbox1}
labelstyle={styles.formlabel}
label="Name"
fieldName="name"
placeHolder="Enter Name"
register={register}
errors={errors}
isRequired
mandatory
charactersOnly/>

prop	description	required	default
fieldName	field name of the form element to be registered	true	None
register	This method allows you to register an input or select element and apply validation rules to React Hook Form. Validation rules are all based on the HTML standard and also allow for custom validation methods.	true	none
errors	This prop includes errors if any, for the form element	true	None
placeHolder	Placeholder to be displayed inside element	false	Enter Value
label	Label to be displayed beside element	true	none
className	class name for the element	true	None
isRequired	defines whether the element is required for the form submission	false	false
maximLength	maximum number of characters to be entered	false	20
maximLength	minimum number of characters to be entered	false	1
charactersOnly	If the field is characters only	false	false
labelstyle	class name for the label	true	None
classNamedark	class name for the element in dark mode	false	null
labeldarkstyle	class name for the element label in dark mode	false	null
readOnly	if the element is read only	false	false
resetCount	Flag to check if character count has to be reset	false	false
id	id for the element if any	false	null

PhoneNumberInput

<PhoneNumberInput
className={styles.inputbox}
classNamedark={styles.inputbox1}
labelstyle={styles.formlabel}
placeHolder="Phone Number"
label="Phone Number"
fieldName="phone"
register={register}
errors={errors}
maxLength={13}
isRequired/>

prop	description	required	default
fieldName	field name of the form element to be registered	true	None
register	This method allows you to register an input or select element and apply validation rules to React Hook Form. Validation rules are all based on the HTML standard and also allow for custom validation methods.	true	none
errors	This prop includes errors if any, for the form element	true	None
placeHolder	Placeholder to be displayed inside element	false	Phone Number
label	Label to be displayed beside element	false	Phone Number
className	class name for the element	true	None
isRequired	defines whether the element is required for the form submission	false	false
maximLength	maximum number of characters to be entered	false	20
maximLength	minimum number of characters to be entered	false	1
labelstyle	class name for the label	true	None
classNamedark	class name for the element in dark mode	false	null
labeldarkstyle	class name for the element label in dark mode	false	null
RegularExp	Bool flag to enable regular expression check	false	false

PasswordField

<PasswordField
fieldName="Password"
label="Password"
register={register}
errors={errors}
placeHolder="Password"
isRequired
minimLength={6}
className={styles.emailbox}
eyeiconstyle={styles.eyeicon}
labelstyle={styles.labeltext}/>

prop	description	required	default
fieldName	field name of the form element to be registered	true	None
register	This method allows you to register an input or select element and apply validation rules to React Hook Form. Validation rules are all based on the HTML standard and also allow for custom validation methods.	true	none
errors	This prop includes errors if any, for the form element	true	None
placeHolder	Placeholder to be displayed inside element	false	Password
label	Label to be displayed beside element	false	Password
className	class name for the element	true	None
isRequired	defines whether the element is required for the form submission	false	false
maximLength	maximum number of characters to be entered	false	20
minimLength	minimum number of characters to be entered	false	1
labelstyle	class name for the label	true	None
classNamedark	class name for the element in dark mode	false	null
labeldarkstyle	class name for the element label in dark mode	false	null
RegularExp	Bool flag to enable regular expression check	false	false

SelectBox

<SelectBox 
className={styles.inputbox}
classNamedark={styles.inputbox1}
name="status"
label="Status"
labelstyle={styles.formlabel}
control={control}
register={register}
values={status}
errors={errors}
placeholder="Choose Status"
mandatory
isRequired/>

prop	description	required	default
name	field name of the form element to be registered	true	None
errors	This prop includes errors if any, for the form element	true	None
placeHolder	Placeholder to be displayed inside element	false	Please Select
label	Label to be displayed beside element	false	Selectbox
className	class name for the element	true	None
isRequired	defines whether the element is required for the form submission	false	false
labelstyle	class name for the label	true	None
classNamedark	class name for the element in dark mode	false	null
labeldarkstyle	class name for the element label in dark mode	false	null
defaultvalue	Default value to be selected	false	0

MultiSelect

<MultiSelect
className={styles.inputbox}
classNamedark={styles.inputbox1}
labelstyle={styles.formlabel}
name="skills"
label="Skills"
control={control}
values={skill.selectdata}
errors={errors}
placeholder="Choose Skills"
mandatory
isRequired/>

className is the styles of the MultiSelect component we can write in the form and it affects when its in light mode and .In dark mode style we passing in classNamedark For label style we passing style in labelstyle we can give label name by 'label=""' fieldName is unique for a field if multiple components is present in th form it is the name we get in the submition of the form . control={control},register={register},errors={errors} must pass it is for error handling and onchange handling of the components When the input component is required field we need to pass isRequired, and when we need mandatory symbol mandatory field must be pass.placeHolder=""

TextArea

 <TextAreaField
          fieldName="Text Area"
          label="Text Area"
          register={register}
          errors={errors}
          placeHolder="Text Area"
          isRequired
        />

prop	description	required	default
fieldName	field name of the form element to be registered	true	None
register	This method allows you to register an input or select element and apply validation rules to React Hook Form. Validation rules are all based on the HTML standard and also allow for custom validation methods.	true	none
errors	This prop includes errors if any, for the form element	true	None
placeHolder	Placeholder to be displayed inside element	false	Enter Value
label	Label to be displayed beside element	false	Text Area
className	class name for the element	true	None
minimLength	minimum number of characters to be entered	false	1
isRequired	defines whether the element is required for the form submission	false	false
labelstyle	class name for the label	true	None
labeldarkstyle	class name for the element label in dark mode	false	null

DatePicker

<DatePickerComponent
className={styles.dateinputbox}
classNamedark={styles.dateinputbox1}
control={control}
name="dateOfBirth"
isRequired
errors={errors}
label="Date Of Birth"
/>

prop	description	required	default
name	field name of the form element to be registered	true	None
errors	This prop includes errors if any, for the form element	true	None
label	Label to be displayed beside element	false	Date
className	class name for the element	true	None
maxDate	maximum Date that can be selected	false	Current Date
minDate	minimum Date that can be selected	false	Current Date - 10 years
isRequired	defines whether the element is required for the form submission	false	false
labelstyle	class name for the label	true	None

Form submission

 const apiData = {
      name: data.name,
      email: data.email,
      phone: data.phone,
      designation: data.designation.value,
      skills,
      status: data.status.value,
      role: data.role.value,
    };
    data.designation = data.designation.value;
    data.actionUrl = 'employee';
    data.actionMethod = 'post';
    data.apiData = apiData;
    dispatch(Entry(data)).then((resp) => {
      setSubmitting(false);
      if (resp.payload.code === 200) {
        navigate(-1);
      } else if (resp.payload.code === 401 || resp.payload.code === 400) {
        setError(resp.payload.message);
      } else {
        setError('Something went wrong!');
      }
    });
  }

passing action url , action method and body data as apiData array we can perform crud operations using this slice.