Forms

React 5 Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

This is a general overview with a summary of the most fundamental knowledge. For the more detailed information regarding specific form, types have a look at the dedicated documentation pages.


Basic example

A basic example of a simple login form with input fields (email and password), checkbox and submit button.

Checkbox and "forgot password" link are positioned inline by using 2 column grid layout.

Note: Most of the demo examples have a fixed width for the demo purpose.
Included code examples do not have a fixed width, so they'll naturally fill the full width of its parent element.
To control the width of the form place it in the grid, use the sizing utilities, or set the width inline.

        
            
            import React from 'react';
            import { 
              MDBInput,
              MDBCol,
              MDBRow,
              MDBCheckbox,
              MDBBtn
            } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <form>
                  <MDBInput className='mb-4' type='email' id='form1Example1' label='Email address' />
                  <MDBInput className='mb-4' type='password' id='form1Example2' label='Password' />
    
                  <MDBRow className='mb-4'>
                    <MDBCol className='d-flex justify-content-center'>
                      <MDBCheckbox id='form1Example3' label='Remember me' defaultChecked />
                    </MDBCol>
                    <MDBCol>
                      <a href='#!'>Forgot password?</a>
                    </MDBCol>
                  </MDBRow>
    
                  <MDBBtn type='submit' block>
                    Sign in
                  </MDBBtn>
                </form>
              );
            }
          
        
    

Every group of form fields should reside in a <form> element. MDB provides no default styling for the <form> element, but there are some powerful browser features that are provided by default.

  • New to browser forms? Consider reviewing the MDN form docs for an overview and complete list of available attributes.
  • <button>s within a <form> default to type="submit", so strive to be specific and always include a type.
  • You can disable every form element within a form with the disabled attribute on the <form>.

Since MDB applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.


Examples

Login form

Typical login form with additional register buttons.

Not a member? Register

or sign up with:

        
            
              import React from 'react';
              import { 
                MDBInput,
                MDBCol,
                MDBRow,
                MDBCheckbox,
                MDBBtn,
                MDBIcon
              } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <form>
                    <MDBInput className='mb-4' type='email' id='form2Example1' label='Email address' />
                    <MDBInput className='mb-4' type='password' id='form2Example2' label='Password' />
      
                    <MDBRow className='mb-4'>
                      <MDBCol className='d-flex justify-content-center'>
                        <MDBCheckbox id='form2Example3' label='Remember me' defaultChecked />
                      </MDBCol>
                      <MDBCol>
                        <a href='#!'>Forgot password?</a>
                      </MDBCol>
                    </MDBRow>
      
                    <MDBBtn type='submit' className='mb-4' block>
                      Sign in
                    </MDBBtn>
      
                    <div className='text-center'>
                      <p>
                        Not a member? <a href='#!'>Register</a>
                      </p>
                      <p>or sign up with:</p>
      
                      <MDBBtn floating color="secondary" className='mx-1'>
                        <MDBIcon fab icon='facebook-f' />
                      </MDBBtn>
      
                      <MDBBtn floating color="secondary" className='mx-1'>
                        <MDBIcon fab icon='google' />
                      </MDBBtn>
      
                      <MDBBtn floating color="secondary" className='mx-1'>
                        <MDBIcon fab icon='twitter' />
                      </MDBBtn>
      
                      <MDBBtn floating color="secondary" className='mx-1'>
                        <MDBIcon fab icon='github' />
                      </MDBBtn>
                    </div>
                  </form>
                );
              }
            
        
    

Register form

Typical register form with additional register buttons.

or sign up with:

        
            
              import React from 'react';
              import { 
                MDBInput,
                MDBCol,
                MDBRow,
                MDBCheckbox,
                MDBBtn,
                MDBIcon
              } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <form>
                    <MDBRow className='mb-4'>
                      <MDBCol>
                        <MDBInput id='form3Example1' label='First name' />
                      </MDBCol>
                      <MDBCol>
                        <MDBInput id='form3Example2' label='Last name' />
                      </MDBCol>
                    </MDBRow>
                    <MDBInput className='mb-4' type='email' id='form3Example3' label='Email address' />
                    <MDBInput className='mb-4' type='password' id='form3Example4' label='Password' />
      
                    <MDBCheckbox
                      wrapperClass='d-flex justify-content-center mb-4'
                      id='form3Example5'
                      label='Subscribe to our newsletter'
                      defaultChecked
                    />
      
                    <MDBBtn type='submit' className='mb-4' block>
                      Sign in
                    </MDBBtn>
      
                    <div className='text-center'>
                      <p>
                        Not a member? <a href='#!'>Register</a>
                      </p>
                      <p>or sign up with:</p>
      
                      <MDBBtn floating color="secondary" className='mx-1'>
                        <MDBIcon fab icon='facebook-f' />
                      </MDBBtn>
      
                      <MDBBtn floating color="secondary" className='mx-1'>
                        <MDBIcon fab icon='google' />
                      </MDBBtn>
      
                      <MDBBtn floating color="secondary" className='mx-1'>
                        <MDBIcon fab icon='twitter' />
                      </MDBBtn>
      
                      <MDBBtn floating color="secondary" className='mx-1'>
                        <MDBIcon fab icon='github' />
                      </MDBBtn>
                    </div>
                  </form>
                );
              }
            
        
    

Contact form

Typical contact form with textarea input as a message field.

        
            
              import React from 'react';
              import { 
                MDBInput,
                MDBCheckbox,
                MDBBtn
              } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <form>
                    <MDBInput id='form4Example1' wrapperClass='mb-4' label='Name' />
                    <MDBInput type='email' id='form4Example2' wrapperClass='mb-4' label='Email address' />
                    <MDBInput wrapperClass='mb-4' textarea id='form4Example3' rows={4} label='Message' />
      
                    <MDBCheckbox
                      wrapperClass='d-flex justify-content-center mb-4'
                      id='form4Example4'
                      label='Send me a copy of this message'
                      defaultChecked
                    />
      
                    <MDBBtn type='submit' className='mb-4' block>
                      Sign in
                    </MDBBtn>
                  </form>
                );
              }
            
        
    

Subscription form

A typical subscription form used when subscribing to the newsletter.

        
            
              import React from 'react';
              import { 
                MDBInput,
                MDBCheckbox,
                MDBBtn
              } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <form>
                    <MDBInput className='mb-4' id='form5Example1' label='Name' />
                    <MDBInput className='mb-4' type='email' id='form5Example2' label='Email address' />
      
                    <MDBCheckbox
                      wrapperClass='d-flex justify-content-center mb-4'
                      id='form5Example3'
                      label='I have read and agree to the terms'
                      defaultChecked
                    />
      
                    <MDBBtn type='submit' block>
                      Subscribe
                    </MDBBtn>
                  </form>
                );
              }
            
        
    

Checkout form

An example of the extended form with typical checkout inputs.

        
            
              import React from 'react';
              import { 
                MDBRow,
                MDBCol,
                MDBInput,
                MDBCheckbox,
                MDBBtn
              } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <form>
                    <MDBRow className='mb-4'>
                      <MDBCol>
                        <MDBInput id='form6Example1' label='First name' />
                      </MDBCol>
                      <MDBCol>
                        <MDBInput id='form6Example2' label='Last name' />
                      </MDBCol>
                    </MDBRow>
      
                    <MDBInput wrapperClass='mb-4' id='form6Example3' label='Company name' />
                    <MDBInput wrapperClass='mb-4' id='form6Example4' label='Address' />
                    <MDBInput wrapperClass='mb-4' type='email' id='form6Example5' label='Email' />
                    <MDBInput wrapperClass='mb-4' type='tel' id='form6Example6' label='Phone' />
      
                    <MDBInput wrapperClass='mb-4' textarea id='form6Example7' rows={4} label='Additional information' />
      
                    <MDBCheckbox
                      wrapperClass='d-flex justify-content-center mb-4'
                      id='form6Example8'
                      label='Create an account?'
                      defaultChecked
                    />
      
                    <MDBBtn className='mb-4' type='submit' block>
                      Place order
                    </MDBBtn>
                  </form>
                );
              }
            
        
    

Login-register

By using pills you can place login and register forms into a single component.

Sign in with:

or:

Not a member? Register

Sign up with:

or:

        
            
              import React from 'react';
              import { 
                MDBRow,
                MDBCol,
                MDBInput,
                MDBCheckbox,
                MDBBtn,
                MDBIcon,
                MDBTabs,
                MDBTabsItem,
                MDBTabsLink,
                MDBTabsContent,
                MDBTabsPane
              } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <div>
                    <MDBTabs pills justify className='mb-3'>
                      <MDBTabsItem>
                        <MDBTabsLink
                          onClick={() => handleLoginRegisterClick('login')}
                          active={loginRegisterActive === 'login'}
                        >
                          Login
                        </MDBTabsLink>
                      </MDBTabsItem>
                      <MDBTabsItem>
                        <MDBTabsLink
                          onClick={() => handleLoginRegisterClick('register')}
                          active={loginRegisterActive === 'register'}
                        >
                          Register
                        </MDBTabsLink>
                      </MDBTabsItem>
                    </MDBTabs>
      
                    <MDBTabsContent>
                      <MDBTabsPane show={loginRegisterActive === 'login'}>
                        <form>
                          <div className='text-center mb-3'>
                            <p>Sign up with:</p>
      
                            <MDBBtn floating color="secondary" className='mx-1'>
                              <MDBIcon fab icon='facebook-f' />
                            </MDBBtn>
      
                            <MDBBtn floating color="secondary" className='mx-1'>
                              <MDBIcon fab icon='google' />
                            </MDBBtn>
      
                            <MDBBtn floating color="secondary" className='mx-1'>
                              <MDBIcon fab icon='twitter' />
                            </MDBBtn>
      
                            <MDBBtn floating color="secondary" className='mx-1'>
                              <MDBIcon fab icon='github' />
                            </MDBBtn>
                          </div>
      
                          <p className='text-center'>or:</p>
      
                          <MDBInput className='mb-4' type='email' id='form7Example1' label='Email address' />
                          <MDBInput className='mb-4' type='password' id='form7Example2' label='Password' />
      
                          <MDBRow className='mb-4'>
                            <MDBCol className='d-flex justify-content-center'>
                              <MDBCheckbox id='form7Example3' label='Remember me' defaultChecked />
                            </MDBCol>
                            <MDBCol>
                              <a href='#!'>Forgot password?</a>
                            </MDBCol>
                          </MDBRow>
      
                          <MDBBtn type='submit' className='mb-4' block>
                            Sign in
                          </MDBBtn>
      
                          <div className='text-center'>
                            <p>
                              Not a member? <a href='#!'>Register</a>
                            </p>
                          </div>
                        </form>
                      </MDBTabsPane>
                      <MDBTabsPane show={loginRegisterActive === 'register'}>
                        <form>
                          <div className='text-center mb-3'>
                            <p>Sign up with:</p>
      
                            <MDBBtn floating color="secondary" className='mx-1'>
                              <MDBIcon fab icon='facebook-f' />
                            </MDBBtn>
      
                            <MDBBtn floating color="secondary" className='mx-1'>
                              <MDBIcon fab icon='google' />
                            </MDBBtn>
      
                            <MDBBtn floating color="secondary" className='mx-1'>
                              <MDBIcon fab icon='twitter' />
                            </MDBBtn>
      
                            <MDBBtn floating color="secondary" className='mx-1'>
                              <MDBIcon fab icon='github' />
                            </MDBBtn>
                          </div>
      
                          <p className='text-center'>or:</p>
      
                          <MDBInput className='mb-4' id='form8Example1' label='Name' />
                          <MDBInput className='mb-4' id='form8Example2' label='Username' />
                          <MDBInput className='mb-4' type='email' id='form8Example3' label='Email address' />
                          <MDBInput className='mb-4' type='password' id='form8Example4' label='Password' />
                          <MDBInput className='mb-4' type='password' id='form8Example5' label='Repeat password' />
      
                          <MDBCheckbox
                            wrapperClass='d-flex justify-content-center mb-4'
                            id='form8Example6'
                            label='I have read and agree to the terms'
                            defaultChecked
                          />
      
                          <MDBBtn type='submit' className='mb-4' block>
                            Sign in
                          </MDBBtn>
                        </form>
                      </MDBTabsPane>
                    </MDBTabsContent>
                  </div>
                );
              }
            
        
    

Layout

There are multiple ways to structure forms and provide them the desired layout. Have a look at the examples below to learn more about forms layout.

Utilities

Margin utilities are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to margin-bottom utilities, and using a single direction throughout the form for consistency.

Feel free to build your forms however you like, with <fieldset>s, <div>s, or nearly any other element.

In the example below, we add .mb-4 class to provide a proper margin between two input fields.

        
            
              import React from 'react';
              import { MDBInput } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <>
                    <MDBInput wrapperClass='mb-4' id='form9Example1' label='Name' />
                    <MDBInput wrapperClass='mb-4' id='form9Example2' label='Email address' type='email' />
                  </>
                );
              }
            
        
    

Form grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. Requires the $enable-grid-classes Sass variable to be enabled (on by default).


        
            
              import React from 'react';
              import { MDBInput, MDBRow, MDBCol } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <>
                    <MDBRow>
                      <MDBCol>
                        <MDBInput id='form10Example1' label='Name' />
                      </MDBCol>
                      <MDBCol>
                        <MDBInput id='form10Example2' label='Email address' type='email' />
                      </MDBCol>
                    </MDBRow>
        
                    <hr />
        
                    <MDBRow>
                      <MDBCol>
                        <MDBInput id='form10Example3' label='First name' />
                      </MDBCol>
                      <MDBCol>
                        <MDBInput id='form10Example4' label='Last name' />
                      </MDBCol>
                      <MDBCol>
                        <MDBInput id='form10Example5' label='Email address' type='email' />
                      </MDBCol>
                    </MDBRow>
                  </>
                );
              }
            
        
    

Gutters

By adding gutter modifier classes, you can have control over the gutter width in as well the inline as block direction. Also requires the $enable-grid-classes Sass variable to be enabled (on by default).


        
            
              import React from 'react';
              import { MDBInput, MDBRow, MDBCol } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <>
                    <MDBRow className='g-1'>
                      <MDBCol>
                        <MDBInput id='form11Example1' label='Name' />
                      </MDBCol>
                      <MDBCol>
                        <MDBInput id='form11Example2' label='Email address' type='email' />
                      </MDBCol>
                    </MDBRow>
        
                    <hr />
        
                    <MDBRow className='g-5'>
                      <MDBCol>
                        <MDBInput id='form11Example4' label='Name' />
                      </MDBCol>
                      <MDBCol>
                        <MDBInput id='form11Example5' label='Email address' type='email' />
                      </MDBCol>
                    </MDBRow>
                  </>
                );
              }
            
        
    

Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-sm-7.

        
            
              import React from 'react';
              import { MDBInput, MDBRow, MDBCol } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <MDBRow className='g-3'>
                    <MDBCol sm='7'>
                      <MDBInput id='form12Example1' label='Name' />
                    </MDBCol>
                    <MDBCol size='sm'>
                      <MDBInput id='form12Example2' label='Name' />
                    </MDBCol>
                    <MDBCol size='sm'>
                      <MDBInput id='form12Example3' label='Name' />
                    </MDBCol>
                  </MDBRow>
                );
              }
            
        
    

Auto-sizing

The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.

        
            
              import React from 'react';
              import {
                MDBInput,
                MDBRow,
                MDBCol,
                MDBCheckbox,
                MDBSwitch,
                MDBBtn
              } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <MDBRow tag='form' className='gy-2 gx-3 align-items-center'>
                    <MDBCol size='auto'>
                      <MDBInput id='form13Example1' label='Label' />
                    </MDBCol>
                    <MDBCol size='auto'>
                      <MDBCheckbox id='form13Example2' label='Checked' defaultChecked />
                    </MDBCol>
                    <MDBCol size='auto'>
                      <MDBInput id='form13Example3' label='Label' />
                    </MDBCol>
                    <MDBCol size='auto'>
                      <MDBSwitch id='form13Example4' label='Checked switch checkbox input' defaultChecked />
                    </MDBCol>
                    <MDBCol size='auto'>
                      <MDBBtn type='submit'>Submit</MDBBtn>
                    </MDBCol>
                  </MDBRow>
                );
              }
            
        
    

Inline forms

Use the .row-cols-* classes to create responsive horizontal layouts. By adding gutter modifier classes, we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the .col-12 helps stack the form controls and more. The .align-items-center aligns the form elements to the middle, making the .form-checkbox align properly.

@
        
            
              import React, { useMemo } from 'react';
              import {
                MDBRow,
                MDBCol,
                MDBCheckbox,
                MDBSwitch,
                MDBBtn,
                MDBInputGroup,
                MDBInputGroupElement,
                MDBInputGroupText
              } from 'mdb-react-ui-kit';
      
              export default function App() {
                const selectData = useMemo(() => [
                  { text: 'One', value: 1, defaultSelected: true },
                  { text: 'Two', value: 2 },
                  { text: 'Three', value: 3 },
                  { text: 'Four', value: 4 },
                  { text: 'Five', value: 5 },
                  { text: 'Six', value: 6 },
                  { text: 'Seven', value: 7 },
                  { text: 'Eight', value: 8 },
                ], []);

                return (
                  <MDBRow tag='form' className='row-cols-lg-auto g-3 align-items-center'>
                    <MDBCol size='12'>
                      <MDBInputGroup className='mb-3'>
                        <MDBInputGroupText>@</MDBInputGroupText>
                        <MDBInputGroupElement type='text' placeholder='Username' />
                      </MDBInputGroup>
                    </MDBCol>
                    <MDBCol size='12'>
                      <MDBSelect data={selectData} />
                    </MDBCol>
                    <MDBCol size='12'>
                      <MDBCheckbox label='Remember me' />
                    </MDBCol>
                    <MDBCol size='12'>
                      <MDBBtn type='submit'>Submit</MDBBtn>
                    </MDBCol>
                  </MDBRow>
                );
              }
            
        
    

If you want to support our friends from TW Elements you can also check out the Tailwind forms documentation.