import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
                  
const TooltipFormValidation = () => {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitted },
  } = useForm();

  const onSubmit = () => {};

return (
  <Form className="needs-validation custom-input" onSubmit={handleSubmit(onSubmit)} noValidate>
  <Row className="g-3">
        <Col md="4" className="position-relative">
          <Label>{FirstName}</Label>
          <input type="text" className={`form-control ${errors.firstName ? "is-invalid" : ""} ${isSubmitted && !errors.firstName ? "is-valid" : ""}`} placeholder="Mark" {...register("firstName", { required: "Please enter your valid name" })} />
          <FormFeedback tooltip valid>
            {LooksGood}
          </FormFeedback>
          {errors.firstName && <FormFeedback tooltip>{errors.firstName.message}</FormFeedback>}
        </Col>
        <Col md="4" className="position-relative">
          <Label>{LastName}</Label>
          <input type="text" className={`form-control ${errors.lastName ? "is-invalid" : ""} ${isSubmitted && !errors.lastName ? "is-valid" : ""}`} placeholder="Otto" {...register("lastName", { required: "Please enter your valid name" })} />
          <FormFeedback tooltip valid>
            {LooksGood}
          </FormFeedback>
          {errors.lastName && <FormFeedback tooltip>{errors.lastName.message}</FormFeedback>}
        </Col>
        <Col md="4" className="position-relative">
          <Label>{UserName}</Label>
          <InputGroup className="has-validation">
            <InputGroupText>{"@"}</InputGroupText>
            <input type="text" className={`form-control ${errors.username ? "is-invalid" : ""} ${isSubmitted && !errors.username ? "is-valid" : ""}`} placeholder="Otto" {...register("username", { required: "Please choose a unique and valid username." })} />
            {errors.username && <FormFeedback tooltip>{errors.username.message}</FormFeedback>}
          </InputGroup>
        </Col>
        <Col md="6" className="position-relative">
          <Label>{City}</Label>
          <input type="text" className={`form-control ${errors.city ? "is-invalid" : ""} ${isSubmitted && !errors.city ? "is-valid" : ""}`} {...register("city", { required: "Please provide a valid city" })} />
          {errors.city && <FormFeedback tooltip>{errors.city.message}</FormFeedback>}
        </Col>
        <Col md="3" className="position-relative">
          <Label>{State}</Label>
          <select className={`form-select ${errors.state ? "is-invalid" : ""} ${isSubmitted && !errors.state ? "is-valid" : ""}`} {...register("state", { required: "Please provide a valid state" })}>
            {Options.map((item, index) => (
              <option value={item.value} key={index}>
                {item.label}
              </option>
            ))}
          </select>
          {errors.state && <FormFeedback tooltip>{errors.state.message}</FormFeedback>}
        </Col>
        <Col md="3" className="position-relative">
          <Label>{Zip}</Label>
          <input type="text" className={`form-control ${errors.zip ? "is-invalid" : ""} ${isSubmitted && !errors.zip ? "is-valid" : ""}`} {...register("zip", { required: "Please provide a valid zip" })} />
          {errors.zip && <FormFeedback tooltip>{errors.zip.message}</FormFeedback>}
        </Col>
        <Col xs="12">
          <Button color="primary">{SubmitForm}</Button>
        </Col>
      </Row>
    </Form>
  );
};

Remove package from project

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

<Form className="theme-form">
  <Card>
    <CardBody class="p-0">
     <Row>
      <Col>
       <FormGroup>
         <Label>Email address</label>
         <Input type="email" placeholder="name@example.com">
       </FormGroup>
      </Col>
     </Row>
    </CardBody>
  </Card>
</Form>

import { Card, CardBody, Row, Col, Input, Label } from "reactstrap";
                        
<Card>               
  <CardBody>
   <Row>
    <Col lg="3" md="6" className="custom-radio-ml">
     <div className="form-check radio radio-primary">
      <Input id="radio1" type="radio" name="radio1" value="option1">
      <Label for="radio1" ckeck>Option<span class="digits"> 1</span></Label>
     </div>
     <div className="form-check radio radio-primary">
      <Input id="radio3" type="radio" name="radio1" value="option1" disabled>
      <Label for="radio3" check disabled>Disabled</Label>
     </div>
     <div className="form-check radio radio-primary">
      <Input id="radio4" type="radio" name="radio1" value="option1" checked>
      <Label for="radio4" check>Checked</Label>
     </div>
   </Col>
   <Col md="6" lg="3">
    <div className="form-check checkbox mb-0">
     <Input id="checkbox1" type="checkbox" >
     <Label className="my-0" for="checkbox1" check>Default</Label>
    </div>
    <div className="form-check checkbox mb-0">
     <Input id="checkbox2" type="checkbox" disabled >
     <Label className="my-0" for="checkbox2" check disabled>Disabled</Label>
    </div>
    <div className="form-check checkbox mb-0">
     <Input id="checkbox3" type="checkbox" checked >
     <Label className="my-0" for="checkbox3" check>Checked</label>
    </div>
   </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";
      
const DatePickerComponentFirst = () => {
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>
  );
};

<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>

const DefaultTouchspin = () => {
const initialValues = DEFAULT_TOUCHSPIN_DATA.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={onDecrement}>
            <i className="fa fa-angle-left" />
          </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={onIncrement}>
            <i className="fa fa-angle-left" />
          </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={STATE_OF_USA} placeholder="States of USA" id="Basic TypeAhead" />
           </div>
         </Form>
       </div>
     </CardBody>
   </Card>
  );
};

const NumberingWizard = () => {
const [step, setStep] = useState(1);
const [showFinish, setShowFinish] = useState(false);
const [finishClicked, setFinishClicked] = useState(false);
const {
  register,
  formState: { errors },
  handleSubmit,
  setValue,
  watch,
} = useForm({});

const formData = watch(); // Store watched values so that they persist between steps

const updateFormData = (event: ChangeEvent) => {
  const name = event.target.name;
  let value: string | boolean = "";
  if (name === "agreeTerms" || name === "informationCheckBox" || name === "agreeConditions") {
    value = event.target.checked;
  } else if (name === "uploadDocumentation") {
    value = event.target.files && event.target.files[0] ? event.target.files[0].name : "";
  } else {
    value = event.target.value ?? "";
  }
  setValue(name as keyof BasicFormItems, value, { shouldValidate: true, shouldDirty: true });
};

const handleBackButton = () => {
  setShowFinish(false);
  setStep((prev) => prev - 1);
  setFinishClicked(false);
};

const handleNextButton = handleSubmit(
  () => {
    if (step === 1 && formData.email && formData.firstName && formData.password && formData.confirmPassword && formData.agreeTerms) {
      setStep(2);
    } else if (step === 2 && formData.placeHolderName && formData.cardNumber && formData.expiration && formData.cvvNumber && formData.uploadDocumentation && formData.informationCheckBox) {
      setStep(3);
    } else if (step === 3 && formData.linkedInLink && formData.gitHubLink && formData.giveFeedBack && formData.state && formData.agreeConditions) {
      setStep(4);
      setShowFinish(true);
    }
  },
  () => {
    toast.error("Please fill out all the fields before moving on to the next step");
  }
);

const handleFinishButton = () => {
  setFinishClicked(true);
  return toast.success("Successfully Completed");
};

return (
  <Col xl="6">
    <Card>
      <CommonCardHeader title={NumberingWizardTitle} span={NumberingWizardSubTitle} />
      <CardBody className="basic-wizard important-validation">
        <div className="stepper-horizontal custom-scrollbar" id="stepper1">
          <StepperHorizontal step={step} finishClicked={finishClicked} />
        </div>
        <div id="msform">
          {step === 1 && <BasicInfoForm register={register} errors={errors} updateFormData={updateFormData} formData={formData} />}
          {step === 2 && <CartInfoForm register={register} errors={errors} updateFormData={updateFormData} formData={formData} />}
          {step === 3 && <FeedbackForm register={register} errors={errors} updateFormData={updateFormData} formData={formData} />}
          {step === 4 && <FinishForm />}
        </div>
        <div className="wizard-footer d-flex gap-2 justify-content-end">
          {step > 1 && (
            <Button color="" className="alert-light-primary" onClick={handleBackButton}>
              {Back}
            </Button>
          )}
          <Button disabled={finishClicked} color="primary" onClick={showFinish ? handleFinishButton : handleNextButton}>
            {showFinish ? "Finish" : "Next"}
          </Button>
        </div>
      </CardBody>
    </Card>
  </Col>
);
};