Top

Forms


npm install react-hook-form
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
import { useForm } from "react-hook-form";

const ValidationForm = () => {
const [selectedOption, setSelectedOption] = useState(null);
const [validate, setValidate] = useState(false);
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = () => {
setValidate(true);
};

return (
<Card>
<CardBody>
    <Form className="needs-validation custom-input" onSubmit={handleSubmit(onSubmit)}>
        <Row className="g-3">
        <Col xs={12}>
            <Label>{FirstName}</Label>
            <input type="text" className={`form-control ${errors.firstName ? 'is-invalid' : ''} ${validate && !errors.firstName ? 'is-valid' : ''}`} placeholder="Mark" {...register("firstName", { required: "Please enter your valid name" })} />
                {errors.firstName && (<FormFeedback>{errors.firstName.message}</FormFeedback>)}
                {validate && !errors.firstName && <FormFeedback valid>{LooksGood}</FormFeedback>}
        </Col>
        <Col xs={12}>
            <Label>{Password}</Label>
            <input type="password" className={`form-control ${errors.password ? 'is-invalid' : ''} ${validate && !errors.password ? 'is-valid' : ''}`} {...register("password", { required: "Please enter your valid password" })} />
                {errors.password && (<FormFeedback>{errors.password.message}</FormFeedback>)}
        </Col>
        <Col md={6}>
        <FormGroup>
            <Label>{City}</Label>
            <input type="text" className={`form-control ${errors.city ? 'is-invalid' : ''} ${validate && !errors.city ? 'is-valid' : ''}`} {...register("city", { required: "Please provide a valid city" })} />
            {errors.city && (<FormFeedback>{errors.city.message}</FormFeedback>)}
            {validate && !errors.city && <FormFeedback valid>{LooksGood}</FormFeedback>}
        </FormGroup>
        </Col>
        <Col md={6}>
        <FormGroup>
            <Label htmlFor="validationCustom05">{Zip}</Label>
            <input type="text" className={`form-control ${errors.zip ? 'is-invalid' : ''} ${validate && !errors.zip ? 'is-valid' : ''}`} {...register('zip', { required: 'Please provide a valid zip' })} />
            {errors.zip && <FormFeedback>{errors.zip.message}</FormFeedback>}
            {validate && !errors.zip && <FormFeedback valid>{LooksGood}</FormFeedback>}
        </FormGroup>
        </Col>
        <Col xs="12">
            <Button color="primary">{SubmitButton}</Button>
        </Col>
        </Row>
    </Form>
</CardBody>
</Card>
);
};

export default ValidationForm;

Remove package from project

npm remove react-hook-form

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>
                
Left Addon
@
<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>
npm i @types/react-datepicker
import DatePicker 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">
<DatePicker className="form-control flatpickr-input" selected={startDate} onChange={handleChange} />
</InputGroup>
</Col>
</Row>
);
};

Remove package from project

npm remove @types/react-datepicker

You have to add the following style css file for the datepicker design
<!-- Datepicker CSS -->
import "react-datepicker/dist/react-datepicker.css";
<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">
        <Button color="primary" outline className={`p-0 decrement-touchspin btn-touchspin me-1 ${btnClass}`} onClick={handleDecrement}>
        <i className="fa fa-minus" />
        </Button>
        <Input className={`input-touchspin spin-outline-${color} me-1`} type="number" value={value} readOnly />
        <Button color={color} outline={outline} className={`p-0 increment-touchspin btn-touchspin ${btnClass}`} onClick={handleIncrement}>
        <i className="fa fa-plus" />
        </Button>
    </div>
    </CardBody>
</Card>
);
};

export default DefaultTouchspin;
npm i react-bootstrap-typeahead
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>
);
};
              

Remove package from project

npm remove react-bootstrap-typeahead


const NumberingWizard = () => {
const [formData, setFormData] = useState({ email: "", firstName: "", password: "", confirmPassword: "", agreeTerms: false, placeHolderName: "", cardNumber: "", expiration: "", cvvNumber: "", uploadDocumentation: "", informationCheckBox: false, linkedInLink: "", gitHubLink: "", giveFeedBack: "", state: "", agreeConditions: false, });
const [step, setStep] = useState(1);
const [showFinish, setShowFinish] = useState(false);
const [finishClicked, setFinishClicked] = useState(false);

const updateFormData = (event: ChangeEvent<HTMLInputElement>) => {
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;
setFormData((prevData) => ({
...prevData, [name]: value,
}));
};
const handleBackButton = () => {
setShowFinish(false);
setStep((prev) => prev - 1)
setFinishClicked(false);
};
const handleNextButton = () => {
const { linkedInLink, gitHubLink, giveFeedBack, state, agreeConditions, email, firstName, password, confirmPassword, agreeTerms, placeHolderName, cardNumber, expiration, cvvNumber, uploadDocumentation, informationCheckBox, } = formData;
if (email !== "" && firstName !== "" && password !== "" && confirmPassword !== "" && agreeTerms !== false && step === 1) {
setStep(2)
} else if (placeHolderName !== "" && cardNumber !== "" && expiration !== "" && cvvNumber !== "" && informationCheckBox !== false && uploadDocumentation !== "" && step === 2) {
setStep(3);
} else if (linkedInLink !== "" && gitHubLink !== "" && giveFeedBack !== "" && state !== "" && agreeConditions !== false && step === 3) {
setStep(4);
setShowFinish(true);
}
else { return 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 className="height-equal">
    <CardBody className="basic-wizard important-validation">
        <div className="stepper-horizontal" id="stepper1">
        {stepperHorizontalData.map((data, index) => (
            <div key={index} className={`stepper-one  step ${step > index + 1 || finishClicked === true ? "done active " : ""}`}>
                <div className="step-circle">
                    <span>{index + 1}</span>
                </div>
                <div className="step-title">{data}</div>
                <div className="step-bar-left" />
                <div className="step-bar-right" />
            </div>
            ))}
        </div>
        <div id="msform">
            {step === 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={updateFormData} value={formData.email} name="email" type="email" placeholder="dunzo@gmail.com" />
                    </Col>
                    <Col sm={6}>
                        <Label>{FirstName}<span className="txt-danger">{'*'}</span></Label>
                        <Input onChange={updateFormData} value={formData.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={updateFormData} value={formData.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={updateFormData} value={formData.confirmPassword} name="confirmPassword" type="password" placeholder="Enter confirm password" />
                    </Col>
                    <Col xs={12}>
                        <FormGroup check>
                            <Input id="inputCheckWizard" name="agreeTerms" onChange={updateFormData} type="checkbox" required />
                            <Label className="mb-0" htmlFor="inputcheckwizard" check>{AgreeTerms}</Label>
                        </FormGroup>
                    </Col>
                </Row>
            </Form>
            )}
            {step === 2 && (<CartInfoForm updateFormData={updateFormData} formData={formData} />)}
            {step === 3 && (<FeedbackForm updateFormData={updateFormData} formData={formData} />)}
            {step === 4 && (<FinishForm />)}
        </div>
        <div className="wizard-footer d-flex gap-2 justify-content-end">
            {step > 1 && (<Button className="alert-light-primary" color="transparent" onClick={handleBackButton}>{Back}</Button>)}
            <Button disabled={finishClicked} color="primary" onClick={showFinish ? handleFinishButton : handleNextButton}>{showFinish ? "Finish" : "Next"}</Button>
        </div>
    </CardBody>
</Card>
</Col>
)
}

export default NumberingWizard;