Advanced Form

An advanced form is a more complex and powerful way to collect user input. An advanced form can include features such as Date input, Credit Card Number, Phone input and more.

You can find the Advanced Form in the src/views/AdvancedForm.jsx file

Preview

Result

Date input

ex. 99/99/9999

Phone input

ex. (999) 999-9999

Taxpayer Identification Numbers

ex. 99-9999999

Social Security Number

ex. 999-99-9999

Eye Script

ex. ~9.99 ~9.99 999

Credit Card Number

ex. 9999 9999 9999 9999

Code

Advanced Form

import React from "react";

const MyComponent = () => {
    return (
        <form>
            <div className="form-group mb-3">
                <label className="form-control-label mb-2">Date input</label>
                <div className="input-group">
                    <span
                        className="input-group-text"
                        style={{
                            backgroundColor: "var(--bg-content)",
                            borderColor: "var(--border-color)",
                            color: "var(  --hedging-text-color)",
                        }}>
                        <i className="fa fa-calendar"></i>
                    </span>
                    <input className="form-control" />
                </div>
                <small>ex. 99/99/9999</small>
            </div>
            <div className="form-group mb-3">
                <label className="form-control-label mb-2">Phone input</label>
                <div className="input-group">
                    <span
                        className="input-group-text"
                        style={{
                            backgroundColor: "var(--bg-content)",
                            borderColor: "var(--border-color)",
                            color: "var(  --hedging-text-color)",
                        }}>
                        <i className="fa fa-phone"></i>
                    </span>
                    <input className="form-control" />
                </div>
                <small>ex. (999) 999-9999</small>
            </div>
            <div className="form-group mb-3">
                <label className="form-control-label mb-2">Taxpayer Identification Numbers</label>
                <div className="input-group">
                    <span
                        className="input-group-text"
                        style={{
                            backgroundColor: "var(--bg-content)",
                            borderColor: "var(--border-color)",
                            color: "var(  --hedging-text-color)",
                        }}>
                        <i className="fa fa-usd"></i>
                    </span>
                    <input className="form-control" />
                </div>
                <small>ex. 99-9999999</small>
            </div>
            <div className="form-group mb-3">
                <label className="form-control-label mb-2">Social Security Number</label>
                <div className="input-group">
                    <span
                        className="input-group-text"
                        style={{
                            backgroundColor: "var(--bg-content)",
                            borderColor: "var(--border-color)",
                            color: "var(  --hedging-text-color)",
                        }}>
                        <i className="fa fa-male"></i>
                    </span>
                    <input className="form-control" />
                </div>
                <small>ex. 999-99-9999</small>
            </div>
            <div className="form-group mb-3">
                <label className="form-control-label mb-2">Eye Script</label>
                <div className="input-group">
                    <span
                        className="input-group-text"
                        style={{
                            backgroundColor: "var(--bg-content)",
                            borderColor: "var(--border-color)",
                            color: "var(  --hedging-text-color)",
                        }}>
                        <i className="fa fa-asterisk"></i>
                    </span>
                    <input className="form-control" />
                </div>
                <small>ex. ~9.99 ~9.99 999</small>
            </div>
            <div className="form-group mb-3">
                <label className="form-control-label mb-2">Credit Card Number</label>
                <div className="input-group">
                    <span
                        className="input-group-text"
                        style={{
                            backgroundColor: "var(--bg-content)",
                            borderColor: "var(--border-color)",
                            color: "var(  --hedging-text-color)",
                        }}>
                        <i className="fa fa-credit-card"></i>
                    </span>
                    <input className="form-control" />
                </div>
                <small>ex. 9999 9999 9999 9999</small>
            </div>
        </form>
    )
}

export default MyComponent;

For more form please visit React Bootstrap