Forms
Validation form Preview link
npm install react-hook-form
import { useForm } from "react-hook-form";
export default function 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">
<Btn color="primary">{SubmitButton}</Btn>
</Col>
</Row>
</Form>
</CardBody>
</Card>
);
};
Remove package from project
npm remove react-hook-form
Base input Preview link
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>
Checkbox & Radio Preview link
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>
Input group Preview link
<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>
Datepicker Offical link Preview link
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";
Switch Preview link
<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>
Touchspin Preview link
export default function 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={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>
);
};
Typeahead Offical link Preview link
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
Form wizard Preview link
export default function 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 && (<Btn className="alert-light-primary" color="transparent" onClick={handleBackButton}>{Back}</Btn>)}
<Btn disabled={finishClicked} color="primary" onClick={showFinish ? handleFinishButton : handleNextButton}>{showFinish ? "Finish" : "Next"}</Btn>
</div>
</CardBody>
</Card>
</Col>
)
}