import { Formik } from 'formik'
                  
export default function ValidationForm() {
  const [submitErrors, setSubmitError] = useState(false);

  const handleSubmit = (values: FormValidationProp, { resetForm }: { resetForm: () => void }) => {
    resetForm();
    setSubmitError(false);
  };

return (
  <Card>
   <CardBody>
      <Formik initialValues={validationFormInitialValue} onSubmit={handleSubmit} validationSchema={formValidationSchema}>
        {({ errors }) => 
        <Form className="g-3 needs-validation custom-input">
          <Row>
            <Col xs="12">
              <FormGroup>
                <Label check>{FirstName}</Label>
                <Field name="firstname" type="text" className={`form-control ${submitErrors && `${errors.firstname ? "is-invalid" : "is-valid"}`}`} placeholder={MarkFirstNamePlaceholder} />
                <ErrorMessage name="firstname" component="span" className="invalid-feedback" />
                <FormFeedback valid>{LooksGood}</FormFeedback>
              </FormGroup>
            </Col>
            <Col xs="12">
              <FormGroup>
                <Label check>{PasswordValidation}</Label>
                <Field name="password" type="text" className={`form-control ${submitErrors && `${errors.password ? "is-invalid" : "is-valid"}`}`} />
                <ErrorMessage name="password" component="span" className="invalid-feedback" />
              </FormGroup>
            </Col>
            <Col xs="12">
              <FormGroup>
                <Label check>{State}</Label>
                <Field name="state" as="select" className={`form-control ${submitErrors && `${errors.state ? "is-invalid" : "is-valid"}`}`}>
                  {validationFormStateList.map((item, index) => (<option value={item} key={index}>{item}</option>))}
                </Field>
                <ErrorMessage name="state" component="span" className="invalid-feedback" />
                <FormFeedback valid>{LooksGood}</FormFeedback>
              </FormGroup>
            </Col>
            <Col md="6">
              <FormGroup>
                <Label check>{City}</Label>
                <Field name="city" type="text" className={`form-control ${submitErrors && `${errors.city ? "is-invalid" : "is-valid"}`}`} />
                <ErrorMessage name="city" component="span" className="invalid-feedback"></ErrorMessage>
                <FormFeedback valid>{LooksGood}</FormFeedback>
              </FormGroup>
            </Col>
            <Col md="6">
              <FormGroup>
                <Label check>{Zip}</Label>
                <Field name="zip" type="text" className={`form-control ${submitErrors && `${errors.zip ? "is-invalid" : "is-valid"}`}`} />
                <ErrorMessage name="zip" component="span" className="invalid-feedback"></ErrorMessage>
                <FormFeedback valid>{LooksGood}</FormFeedback>
              </FormGroup>
            </Col>
            <Col xs="12">
              <FormGroup check>
                <Field name="terms" className={`form-check-input ${submitErrors && ` ${errors.terms ? "text-danger" : "text-success"}`}`} id="invalidCheck" type="checkbox" value="Agree to terms and conditions" />
                <Label for='invalidCheck' className={`${submitErrors && ` ${errors.terms ? "text-danger" : "text-success"}`}`} check>{AgreeCondition}</Label>
              </FormGroup>
            </Col>
            <Col xs="12">
              <Btn color="primary" type="submit" onClick={() => setSubmitError(true)}>{SubmitButton}</Btn>
            </Col>
          </Row>
        </Form>
      }
      </Formik>
    </CardBody>
  </Card>
  );
};

Remove package from project

npm remove formik

import { Card, CardBody, Row, FormGroup, Col, Form, Input, Label } from "reactstrap";

<Card>
 <CardBody>
  <Form >
   <Row>
    <Col>
     <FormGroup>
       <Label>Email address</label>
       <Input type="email" placeholder="name@example.com">
     </FormGroup>
    </Col>
   </Row>
  </Form>
 </CardBody>
</Card>

import { Card, CardBody, Row, Col, Input, Label } from "reactstrap";
                  
 <Card>               
  <CardBody>
   <Row>
    <Col sm={6} xl={4}>
     <FormGroup check>
      <Input id="radio1" type="radio" name="radio1" value="option1">
      <Label for="radio1" ckeck>Option<span class="digits"> 1</span></Label>
     </FormGroup>
     <FormGroup check>
      <Input id="radio3" type="radio" name="radio1" value="option1" disabled>
      <Label for="radio3" check disabled>Disabled</Label>
     </FormGroup>
     <FormGroup check>
      <Input id="radio4" type="radio" name="radio1" value="option1" checked>
      <Label for="radio4" check>Checked</Label>
     </FormGroup>
   </Col>
   <Col sm={6} xl={4}>
    <FormGroup check>
     <Input id="checkbox1" type="checkbox" >
     <Label className="my-0" for="checkbox1" check>Default</Label>
    </FormGroup>
    <FormGroup check>
     <Input id="checkbox2" type="checkbox" disabled >
     <Label className="my-0" for="checkbox2" check disabled>Disabled</Label>
    </FormGroup>
    <FormGroup check>
     <Input id="checkbox3" type="checkbox" checked >
     <Label className="my-0" for="checkbox3" check>Checked</label>
    </FormGroup>
   </Col>
   </Row>
  </CardBody>
</Card>

<Form>
  <FormGroup className="m-form__group">
   <div class="form-label">Left Addon</div>
   <InputGroup>
    <span class="input-group-text">@</span>
    <Input type="text" placeholder="Email">
   </InputGroup>
  </FormGroup>
</Form>

import ReactDatePicker from "react-datepicker";

export default function DatePickerComponent() {
  const [startDate, setStartDate] = useState(new Date());
  const handleChange = (date: Date) => setStartDate(date);

  return (
    <Row>
      <Col xxl="9" className="box-col-12">
        <InputGroup className="flatpicker-calender">
          <ReactDatePicker className="form-control flatpickr-input" selected={startDate} onChange={handleChange} />
        </InputGroup>
      </Col>
    </Row>
  );
};
                

Remove package from project

npm remove @types/react-datepicker

<Label className="switch">
 <Input type="checkbox" checked>
 <span className="switch-state"></span>
</Label>
<Label className="switch">
 <Input type="checkbox">
 <span className="switch-state"></span>
</Label>

export default function DefaultTouchspin() {
  const initialValues = defaultTouchSpinData.map((data) => data.value);
  const [values, setValues] = useState(initialValues);
  const handleIncrement = (index:number) => {
    setValues((prevValues) => {
      return prevValues.map((value, i) => (i === index ? value + 1 : value));
    });
  };
  const handleDecrement = (index:number) => {
    setValues((prevValues) => {
      return prevValues.map((value, i) => (i === index && value > 0 ? value - 1 : value));
    });
  };

  return (
      <Card>
        <CardBody className="common-flex">
          <div className="touchspin-wrapper d-flex">
            <Btn color="primary" outline className={`p-0 decrement-touchspin btn-touchspin me-1 ${btnClass}`} onClick={handleDecrement}>
              <i className="fa fa-minus" />
            </Btn>
            <Input className={`input-touchspin spin-outline-${color} me-1`} type="number" value={value} readOnly />
            <Btn color={color} outline={outline} className={`p-0 increment-touchspin btn-touchspin ${btnClass}`} onClick={handleIncrement}>
              <i className="fa fa-plus" />
            </Btn>
          </div>
        </CardBody>
      </Card>
  );
};

import { Typeahead } from "react-bootstrap-typeahead";

const BasicTypeAhead = () => {
  return (
   <Card>
     <CardBody>
       <div id="the-basics">
         <Form className="theme-form">
           <div>
             <Typeahead options={stateOfUsa} placeholder="States of USA" id="Basic TypeAhead" />
           </div>
         </Form>
       </div>
     </CardBody>
   </Card>
  );
};

Remove package from project

npm remove react-bootstrap-typeahead

export default function NumberingWizard() {
  const { numberLevel,basicInputFormValue, showFinish } = useAppSelector((state)=>state.numberingWizard)
  const dispatch= useAppDispatch()

  const getUserData = (event: ChangeEvent) => {
    const name = event.target.name;
    const value = name === "agreeTerms" || name === "informationCheckBox" || (name === "agreeConditions") ? event.target.checked : (name === "uploadDocumentation") ? event.target.files && event.target.files[0].name : event.target.value;
    dispatch(setBasicInputFormValue({ ...basicInputFormValue, [name]: value }));
  };

return (
    <Col xl={6}>
        <Card className="height-equal">
            <CardBody className="basic-wizard important-validation">
                <div className="stepper-horizontal" id="stepper1">
                {stepperHorizontalData.map((data, index) => (
                  <div key={index} className={`stepper-${data.step} stepper step ${level > index + 1 ? "done active " : "editing"}`}>
                      <div className="step-circle">
                          <span>{index + 1}</span>
                      </div>
                      <div className="step-title">{data.title}</div>
                      <div className="step-bar-left" />
                      <div className="step-bar-right" />
                  </div>
                  ))}
                </div>
                <div id="msform">
                    {numberLevel === 1 && (
                      <Form className="stepper-one needs-validation custom-input" noValidate>
                        <Row className="g-3">
                            <Col sm={6}>
                                <Label>{EmailAddress}<span className="txt-danger">{'*'}</span></Label>
                                <Input onChange={getUserData} value={basicInputFormValue.email} name="email" type="email" placeholder="crocs@gmail.com" />
                            </Col>
                            <Col sm={6}>
                                <Label>{FirstName}<span className="txt-danger">{'*'}</span></Label>
                                <Input onChange={getUserData} value={basicInputFormValue.firstName} name="firstName" type="text" placeholder="Enter your name" />
                            </Col>
                            <Col xs={12}>
                                <Col sm={12}><Label>{Password}<span className="txt-danger">{'*'}</span></Label></Col>
                                <Input onChange={getUserData} value={basicInputFormValue.password} name="password" type="password" placeholder="Enter password" />
                            </Col>
                            <Col xs={12}>
                                <Col sm={12}><Label>{ConfirmPassword}<span className="txt-danger">{'*'}</span></Label></Col>
                                <Input onChange={getUserData} value={basicInputFormValue.confirmPassword} name="confirmPassword" type="password" placeholder="Enter confirm password" />
                            </Col>
                            <Col xs={12}>
                                <FormGroup check>
                                    <Input id="inputCheckWizard" name="agreeTerms" onChange={getUserData} type="checkbox" required />
                                    <Label className="mb-0" htmlFor="inputcheckwizard" check>{AgreeTerms}</Label>
                                </FormGroup>
                            </Col>
                        </Row>
                    </Form>
                    )}
                    {numberLevel === 2 && (<CartInfoForm getUserData={getUserData} basicInputFormValue={basicInputFormValue} />)}
                    {numberLevel === 3 && (<FeedbackForm getUserData={getUserData} basicInputFormValue={basicInputFormValue} />)}
                    {numberLevel === 4 && (<Form className="stepper-four g-3 needs-validation" noValidate><FinishForm /></Form>)}
                </div>
                <div className="wizard-footer d-flex gap-2 justify-content-end">
                    {numberLevel > 1 && (<Btn className="alert-light-primary" color="transparent" onClick={()=> dispatch(handleBackButton())}>{Back}</Btn>)}
                    <Btn disabled={showFinish ? true : false} color="primary" onClick={()=> dispatch(handleNextButton())}>{showFinish ? "Finish" : "Next"}</Btn>
                </div>
            </CardBody>
        </Card>
    </Col>
)
}