React Forms Responsive form Example

Build in responsiveness into your react form using the grid layout. Define how the form elements behave across multiple screen sizes.

The column widths will adapt to the screen size based on the predefined .mbsc-col-{breakpoint}-{size} classes.
The examples are using the .mbsc-col-md-6, .mbsc-col-lg-6 and .mbsc-col-lg-3 classes.

Get started with this example

Javascript jQuery Angular React Vue

                    <div className="mbsc-row">
    <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <Input label="Email" inputStyle="box" labelStyle="floating" placeholder="Enter your email address" />
    </div>
    <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <Input label="Password" inputStyle="box" labelStyle="floating" placeholder="Set a password" passwordToggle="true" />
    </div>
    <div className="mbsc-col-12 mbsc-col-lg-6">
        <Input label="Address" inputStyle="box" labelStyle="floating" placeholder="What is your address?" />
    </div>
</div>
<div className="mbsc-row">
    <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <Input label="Town" inputStyle="box" labelStyle="floating" placeholder="Enter your town" />
    </div>
    <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <Input label="State" inputStyle="box" labelStyle="floating" placeholder="Select your state" />
    </div>
    <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <Input label="Zip" inputStyle="box" labelStyle="floating" placeholder="What is your zip code" />
    </div>
    <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <Input label="Country" inputStyle="box" labelStyle="floating" placeholder="Select your country" />
    </div>
</div>
<div className="mbsc-row">
    <div className="mbsc-col-12 mbsc-col-md-12 mbsc-col-lg-3">
        <div className="mbsc-button-group-block">
            <Button color="success">Create account</Button>
        </div>
    </div>
</div>
                