Forms

Vue Bootstrap 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.

MDB 5 - Bootstrap 5 & Material Design

Video tutorial

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.

Forgot password? 
        
            
            <template>
              <form>
                <!-- Email input -->
                <MDBInput
                  type="email"
                  label="Email address"
                  id="form1Email"
                  v-model="form1Email"
                  wrapperClass="mb-4"
                />
                <!-- Password input --> 
                <MDBInput
                  type="password"
                  label="Password"
                  id="form1Password"
                  v-model="form1Password"
                  wrapperClass="mb-4"
                />
                <!-- 2 column grid layout for inline styling -->
                <MDBRow class="mb-4">
                  <MDBCol class="d-flex justify-content-center">
                    <!-- Checkbox -->
                    <MDBCheckbox
                      label="Remember me"
                      id="form1LoginCheck"
                      v-model="form1LoginCheck"
                      wrapperClass="mb-3 mb-md-0"
                    />
                  </MDBCol>
                  <MDBCol>
                    <!-- Simple link -->
                    <a href="#!">Forgot password?</a>
                  </MDBCol>
                </MDBRow>
                <!-- Submit button -->
                <MDBBtn color="primary" block> Sign in </MDBBtn>
              </form>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBRow,
                MDBCol,
                MDBInput,
                MDBCheckbox,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRow,
                  MDBCol,
                  MDBInput,
                  MDBCheckbox,
                  MDBBtn,
                },
                setup() {
                  const form1Email = ref("");
                  const form1Password = ref("");
                  const form1LoginCheck = ref(true);

                  return {
                    form1Email,
                    form1Password,
                    form1LoginCheck,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBRow,
                MDBCol,
                MDBInput,
                MDBCheckbox,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              
              const form1Email = ref("");
              const form1Password = ref("");
              const form1LoginCheck = ref(true);
            </script>

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.

Forgot password?

Not a member? Register

or sign up with:

        
            
            <template>
              <form>
                <!-- Email input -->
                <MDBInput
                  type="email"
                  label="Email address"
                  id="form2Email"
                  v-model="form2Email"
                  wrapperClass="mb-4"
                />
                <!-- Password input --> 
                <MDBInput
                  type="password"
                  label="Password"
                  id="form2Password"
                  v-model="form2Password"
                  wrapperClass="mb-4"
                />
                <!-- 2 column grid layout for inline styling -->
                <MDBRow class="mb-4">
                  <MDBCol class="d-flex justify-content-center">
                    <!-- Checkbox -->
                    <MDBCheckbox
                      label="Remember me"
                      id="form2LoginCheck"
                      v-model="form2LoginCheck"
                      wrapperClass="mb-3 mb-md-0"
                    />
                  </MDBCol>
                  <MDBCol>
                    <!-- Simple link -->
                    <a href="#!">Forgot password?</a>
                  </MDBCol>
                </MDBRow>
                <!-- Submit button -->
                <MDBBtn color="primary" block> Sign in </MDBBtn>

                <!-- Register buttons -->
                <div class="text-center">
                  <p>Not a member? <a href="#!">Register</a></p>
                  <p>or sign up with:</p>
                  <MDBBtn color="secondary" floating class="mx-1">
                    <MDBIcon iconStyle="fab" icon="facebook-f"/>>
                  </MDBBtn>

                  <MDBBtn color="secondary" floating class="mx-1">
                    <MDBIcon iconStyle="fab" icon="google"/>
                  </MDBBtn>

                  <MDBBtn color="secondary" floating class="mx-1">
                    <MDBIcon iconStyle="fab" icon="twitter"/>
                  </MDBBtn>

                  <MDBBtn color="secondary" floating class="mx-1">
                    <MDBIcon iconStyle="fab" icon="github"/>
                  </MDBBtn>
                </div>
              </form>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBRow,
                MDBCol,
                MDBInput,
                MDBCheckbox,
                MDBBtn,
                MDBIcon
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRow,
                  MDBCol,
                  MDBInput,
                  MDBCheckbox,
                  MDBBtn,
                  MDBIcon
                },
                setup() {
                  const form2Email = ref("");
                  const form2Password = ref("");
                  const form2LoginCheck = ref(true);

                  return {
                    form2Email,
                    form2Password,
                    form2LoginCheck,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBRow,
                MDBCol,
                MDBInput,
                MDBCheckbox,
                MDBBtn,
                MDBIcon
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const form2Email = ref("");
              const form2Password = ref("");
              const form2LoginCheck = ref(true);
            </script>

Register form

Typical register form with additional register buttons.

or sign up with:

        
            
            <template>
              <form>
                <!-- 2 column grid layout with text inputs for the first and last names -->
                <MDBRow class="mb-4">
                  <MDBCol>
                    <MDBInput
                      type="text"
                      label="First name"
                      id="form3FirstName"
                      v-model="form3FirstName"
                    />
                  </MDBCol>
                  <MDBCol>
                    <MDBInput
                      type="text"
                      label="Last name"
                      id="form3LastName"
                      v-model="form3LastName"
                    />
                  </MDBCol>
                </MDBRow>
                <!-- Email input -->
                <MDBInput
                  type="email"
                  label="Email address"
                  id="form3Email"
                  v-model="form3Email"
                  wrapperClass="mb-4"
                />
                <!-- Password input -->
                <MDBInput
                  type="password"
                  label="Password"
                  id="form3Password"
                  v-model="form3Password"
                  wrapperClass="mb-4"
                />

                <!-- Checkbox -->
                <MDBCheckbox
                  label="Remember me"
                  id="form3SubscribeCheck"
                  v-model="form3SubscribeCheck"
                  wrapperClass="d-flex justify-content-center mb-4"
                />

                <!-- Submit button -->
                <MDBBtn color="primary" block class="mb-4"> Sign up </MDBBtn>

                <!-- Register buttons -->
                <div class="text-center">
                  <p>or sign up with:</p>
                  <MDBBtn color="secondary" floating class="mx-1">
                    <MDBIcon iconStyle="fab" icon="facebook-f" />>
                  </MDBBtn>

                  <MDBBtn color="secondary" floating class="mx-1">
                    <MDBIcon iconStyle="fab" icon="google" />
                  </MDBBtn>

                  <MDBBtn color="secondary" floating class="mx-1">
                    <MDBIcon iconStyle="fab" icon="twitter" />
                  </MDBBtn>

                  <MDBBtn color="secondary" floating class="mx-1">
                    <MDBIcon iconStyle="fab" icon="github" />
                  </MDBBtn>
                </div>
              </form>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBRow,
                MDBCol,
                MDBInput,
                MDBCheckbox,
                MDBBtn,
                MDBIcon
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRow,
                  MDBCol,
                  MDBInput,
                  MDBCheckbox,
                  MDBBtn,
                  MDBIcon
                },
                setup() {
                  const form3FirstName = ref("");
                  const form3LastName = ref("");
                  const form3Email = ref("");
                  const form3Password = ref("");
                  const form3SubscribeCheck = ref(true);

                  return {
                    form3FirstName,
                    form3LastName,
                    form3Email,
                    form3Password,
                    form3SubscribeCheck
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBRow,
                MDBCol,
                MDBInput,
                MDBCheckbox,
                MDBBtn,
                MDBIcon
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const form3FirstName = ref("");
              const form3LastName = ref("");
              const form3Email = ref("");
              const form3Password = ref("");
              const form3SubscribeCheck = ref(true);
            </script>

Contact form

Typical contact form with textarea input as a message field.

        
            
            <template>
              <form>
                <!-- Name input -->
                <MDBInput
                  type="text"
                  label="Name"
                  id="form4Name"
                  v-model="form4Name"
                  wrapperClass="mb-4"
                />

                <!-- Email input -->
                <MDBInput
                  type="email"
                  label="Email address"
                  id="form4Email"
                  v-model="form4Email"
                  wrapperClass="mb-4"
                />

                <!-- Message input -->
                <MDBTextarea
                  label="Message"
                  id="form4Textarea"
                  v-model="form4Textarea"
                  wrapperClass="mb-4"
                />

                <!-- Checkbox -->
                <div class="form-check d-flex justify-content-center mb-4">
                  <MDBCheckbox
                    label="Send me a copy of this message"
                    id="form4CopyCheck"
                    v-model="form4CopyCheck"
                  />
                </div>

                <!-- Submit button -->
                <MDBBtn color="primary" block class="mb-4"> Send </MDBBtn>
              </form>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBInput,
                MDBCheckbox,
                MDBBtn,
                MDBTextarea
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBInput,
                  MDBCheckbox,
                  MDBBtn,
                  MDBTextarea
                },
                setup() {
                  const form4Name = ref("");
                  const form4Email = ref("");
                  const form4Password = ref("");
                  const form4Textarea = ref("");
                  const form4CopyCheck = ref(true);

                  return {
                    form4Name,
                    form4Email,
                    form4Password,
                    form4Textarea,
                    form4CopyCheck
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBInput,
                MDBCheckbox,
                MDBBtn,
                MDBTextarea
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const form4Name = ref("");
              const form4Email = ref("");
              const form4Password = ref("");
              const form4Textarea = ref("");
              const form4CopyCheck = ref(true);
            </script>

Subscription form

A typical subscription form used when subscribing to the newsletter.

        
            
            <template>
              <form>
                <!-- Name input -->
                <MDBInput
                  type="text"
                  label="Name"
                  id="form5Name"
                  v-model="form5Name"
                  wrapperClass="mb-4"
                />

                <!-- Email input -->
                <MDBInput
                  type="email"
                  label="Email address"
                  id="form5Email"
                  v-model="form5Email"
                  wrapperClass="mb-4"
                />

                <!-- Checkbox -->
                <MDBCheckbox
                  label="I have read and agree to the terms"
                  id="form5TermsCheck"
                  v-model="form5TermsCheck"
                  wrapperClass="d-flex justify-content-center mb-4"
                />

                <!-- Submit button -->
                <MDBBtn color="primary" block class="mb-4"> Subscribe </MDBBtn>
              </form>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBInput,
                MDBCheckbox,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBInput,
                  MDBCheckbox,
                  MDBBtn,
                },
                setup() {
                  const form5Name = ref("");
                  const form5Email = ref("");
                  const form5TermsCheck = ref(true);

                  return {
                    form5Name,
                    form5Email,
                    form5TermsCheck
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBInput,
                MDBCheckbox,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const form5Name = ref("");
              const form5Email = ref("");
              const form5TermsCheck = ref(true);
            </script>

Checkout form

An example of the extended form with typical checkout inputs.

        
            
            <template>
              <form>
                <!-- 2 column grid layout with text inputs for the first and last names -->
                <MDBRow class="mb-4">
                  <MDBCol>
                    <MDBInput
                      type="text"
                      label="First Name"
                      id="form6FirstName"
                      v-model="form6FirstName"
                    />
                  </MDBCol>
                  <MDBCol>
                    <MDBInput
                      type="text"
                      label="Last Name"
                      id="form6LastName"
                      v-model="form6LastName"
                    />
                  </MDBCol>
                </MDBRow>

                <!-- Text input -->
                <MDBInput
                  type="text"
                  label="Company Name"
                  id="form6CompanyName"
                  v-model="form6CompanyName"
                  wrapperClass="mb-4"
                />

                <!-- Text input -->
                <MDBInput
                  type="text"
                  label="Address"
                  id="form6Address"
                  v-model="form6Address"
                  wrapperClass="mb-4"
                />

                <!-- Email input -->
                <MDBInput
                  type="email"
                  label="Email"
                  id="form6Email"
                  v-model="form6Email"
                  wrapperClass="mb-4"
                />

                <!-- Number input -->
                <MDBInput
                  type="tel"
                  label="Phone"
                  id="form6Phone"
                  v-model="form6Phone"
                  wrapperClass="mb-4"
                />

                <!-- Message input -->
                <MDBTextarea
                  label="Additional information"
                  id="form6Info"
                  v-model="form6Info"
                  wrapperClass="mb-4"
                />

                <!-- Checkbox -->
                <MDBCheckbox
                  label="Create an account?"
                  id="form6CreateCheckbox"
                  v-model="form6CreateCheckbox"
                  wrapperClass="d-flex justify-content-center mb-4"
                />

                <!-- Submit button -->
                <MDBBtn color="primary" block class="mb-4">
                  Place order
                </MDBBtn>
              </form>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBInput,
                MDBCheckbox,
                MDBTextarea,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBInput,
                  MDBCheckbox,
                  MDBTextarea,
                  MDBBtn,
                },
                setup() {
                  const form6FirstName = ref("");
                  const form6LastName = ref("");
                  const form6CompanyName = ref("");
                  const form6Address = ref("");
                  const form6Email = ref("");
                  const form6Phone = ref("");
                  const form6Info = ref("");
                  const form6CreateCheckbox = ref(true);

                  return {
                    form6FirstName,
                    form6LastName,
                    form6CompanyName,
                    form6Address,
                    form6Email,
                    form6Phone,
                    form6Info,
                    form6CreateCheckbox
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBInput,
                MDBCheckbox,
                MDBTextarea,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const form6FirstName = ref("");
              const form6LastName = ref("");
              const form6CompanyName = ref("");
              const form6Address = ref("");
              const form6Email = ref("");
              const form6Phone = ref("");
              const form6Info = ref("");
              const form6CreateCheckbox = ref(true);
            </script>

Login-register

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

Sign in with:

or:

Forgot password?

Not a member? Register

Sign up with:

or:

        
            
            <template>
              <div>
                <MDBTabs v-model="form7ActiveTab">
                  <!-- Tabs navs -->
                  <MDBTabNav pills justify tabsClasses="mb-3">
                    <MDBTabItem tabId="form7-login" href="form7-login"
                      >Login</MDBTabItem
                    >
                    <MDBTabItem tabId="form7-register" href="form7-register"
                      >Register</MDBTabItem
                    >
                  </MDBTabNav>
                  <!-- Tabs navs -->
                  <!-- Tabs content -->
                  <MDBTabContent>
                    <MDBTabPane tabId="form7-login">
                      <form>
                        <div class="text-center mb-3">
                          <p>Sign in with:</p>
                          <MDBBtn color="secondary" floating class="mx-1">
                            <MDBIcon iconStyle="fab" icon="facebook-f" />>
                          </MDBBtn>

                          <MDBBtn color="secondary" floating class="mx-1">
                            <MDBIcon iconStyle="fab" icon="google" />
                          </MDBBtn>

                          <MDBBtn color="secondary" floating class="mx-1">
                            <MDBIcon iconStyle="fab" icon="twitter" />
                          </MDBBtn>

                          <MDBBtn color="secondary" floating class="mx-1">
                            <MDBIcon iconStyle="fab" icon="github" />
                          </MDBBtn>
                        </div>

                        <p class="text-center">or:</p>

                        <!-- Email input -->
                        <MDBInput
                          type="email"
                          label="Email address"
                          id="form7LoginEmail"
                          v-model="form7LoginEmail"
                          wrapperClass="mb-4"
                        />

                        <!-- Password input -->
                        <MDBInput
                          type="password"
                          label="Password"
                          id="form7LoginPassword"
                          v-model="form7LoginPassword"
                          wrapperClass="mb-4"
                        />

                        <!-- 2 column grid layout for inline styling -->
                        <MDBRow class="mb-4">
                          <MDBCol class="d-flex justify-content-center">
                            <!-- Checkbox -->
                            <MDBCheckbox
                              label="Remember me"
                              id="form7LoginCheck"
                              v-model="form7LoginCheck"
                              wrapperClass="mb-3 mb-md-0"
                            />
                          </MDBCol>

                          <MDBCol>
                            <!-- Simple link -->
                            <a href="#!">Forgot password?</a>
                          </MDBCol>
                        </MDBRow>

                        <!-- Submit button -->
                        <MDBBtn color="primary" block class="mb-4"> Sign in </MDBBtn>

                        <!-- Register buttons -->
                        <div class="text-center">
                          <p>Not a member? <a href="#!">Register</a></p>
                        </div>
                      </form>
                    </MDBTabPane>
                    <MDBTabPane tabId="form7-register">
                      <form>
                        <div class="text-center mb-3">
                          <p>Sign up with:</p>
                          <MDBBtn color="secondary" floating class="mx-1">
                            <MDBIcon iconStyle="fab" icon="facebook-f" />>
                          </MDBBtn>

                          <MDBBtn color="secondary" floating class="mx-1">
                            <MDBIcon iconStyle="fab" icon="google" />
                          </MDBBtn>

                          <MDBBtn color="secondary" floating class="mx-1">
                            <MDBIcon iconStyle="fab" icon="twitter" />
                          </MDBBtn>

                          <MDBBtn color="secondary" floating class="mx-1">
                            <MDBIcon iconStyle="fab" icon="github" />
                          </MDBBtn>
                        </div>

                        <p class="text-center">or:</p>

                        <!-- Name input -->
                        <MDBInput
                          type="text"
                          label="Name"
                          id="form7RegisterName"
                          v-model="form7RegisterName"
                          wrapperClass="mb-4"
                        />

                        <!-- Username input -->
                        <MDBInput
                          type="text"
                          label="Username"
                          id="form7RegisterUsername"
                          v-model="form7RegisterUsername"
                          wrapperClass="mb-4"
                        />

                        <!-- Email input -->
                        <MDBInput
                          type="email"
                          label="Email"
                          id="form7RegisterEmail"
                          v-model="form7RegisterEmail"
                          wrapperClass="mb-4"
                        />

                        <!-- Password input -->
                        <MDBInput
                          type="password"
                          label="Password"
                          id="form7RegisterPassword"
                          v-model="form7RegisterPassword"
                          wrapperClass="mb-4"
                        />

                        <!-- Repeat Password input -->
                        <MDBInput
                          type="password"
                          label="Repeat password"
                          id="form7RegisterPasswordRepeat"
                          v-model="form7RegisterPasswordRepeat"
                          wrapperClass="mb-4"
                        />

                        <!-- Checkbox -->
                        <MDBCheckbox
                          label="I have read and agree to the terms"
                          id="form7RegsiterTermsCheck"
                          v-model="form7RegsiterTermsCheck"
                          wrapperClass="d-flex justify-content-center mb-4"
                        />

                        <!-- Submit button -->
                        <MDBBtn color="primary" block class="mb-3">
                          Sign in
                        </MDBBtn>
                      </form>
                    </MDBTabPane>
                  </MDBTabContent>
                  <!-- Tabs content -->
                </MDBTabs>
              </div>
            </template>
          
        
    
        
            
            <script>
             import {
                MDBInput,
                MDBCheckbox,
                MDBTextarea,
                MDBBtn,
                MDBTabs,
                MDBTabNav,
                MDBTabContent,
                MDBTabItem,
                MDBTabPane,
                MDBIcon
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBInput,
                  MDBCheckbox,
                  MDBTextarea,
                  MDBBtn,
                  MDBTabs,
                  MDBTabNav,
                  MDBTabContent,
                  MDBTabItem,
                  MDBTabPane,
                  MDBIcon
                },
                setup() {
                  const form7ActiveTab = ref("form7-login");
                  const form7LoginEmail = ref("");
                  const form7LoginPassword = ref("");
                  const form7LoginCheck = ref(true);
                  const form7RegisterName = ref("");
                  const form7RegisterUsername = ref("");
                  const form7RegisterEmail = ref("");
                  const form7RegisterPassword = ref("");
                  const form7RegisterPasswordRepeat = ref("");
                  const form7RegsiterTermsCheck = ref(true);

                  return {
                    form7ActiveTab,
                    form7LoginEmail,
                    form7LoginPassword,
                    form7LoginCheck,
                    form7RegisterName,
                    form7RegisterUsername,
                    form7RegisterEmail,
                    form7RegisterPassword,
                    form7RegisterPasswordRepeat,
                    form7RegsiterTermsCheck
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
            import {
                MDBInput,
                MDBCheckbox,
                MDBTextarea,
                MDBBtn,
                MDBTabs,
                MDBTabNav,
                MDBTabContent,
                MDBTabItem,
                MDBTabPane,
                MDBIcon
              } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const form7ActiveTab = ref("form7-login");
              const form7LoginEmail = ref("");
              const form7LoginPassword = ref("");
              const form7LoginCheck = ref(true);
              const form7RegisterName = ref("");
              const form7RegisterUsername = ref("");
              const form7RegisterEmail = ref("");
              const form7RegisterPassword = ref("");
              const form7RegisterPasswordRepeat = ref("");
              const form7RegsiterTermsCheck = ref(true);
            </script>

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. 

        
            
            <template>
              <!-- Name input -->
              <MDBInput
                type="text"
                label="Name"
                id="form8Name"
                v-model="form8Name"
                wrapperClass="mb-4"
              />

              <!-- Email input -->
              <MDBInput
                type="email"
                label="Email"
                id="form8Email"
                v-model="form8Email"
                wrapperClass="mb-4"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBInput } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBInput
                },
                setup() {
                  const form8Name = ref("");
                  const form8Email = ref("");

                  return {
                    form8Name,
                    form8Email
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBInput } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              
              const form8Name = ref("");
              const form8Email = ref("");
            </script>

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). 

        
            
            <template>
              <MDBRow>
                <MDBCol>
                  <!-- Name input -->
                  <MDBInput
                    type="text"
                    label="Name"
                    id="form9Name"
                    v-model="form9Name"
                  />
                </MDBCol>
                <MDBCol>
                  <!-- Email input -->
                  <MDBInput
                    type="email"
                    label="Email address"
                    id="form9Email"
                    v-model="form9Email"
                  />
                </MDBCol>
              </MDBRow>

              <hr />

              <MDBRow>
                <MDBCol>
                  <!-- Name input -->
                  <MDBInput
                    type="text"
                    label="First name"
                    id="form9FirstName"
                    v-model="form9FirstName"
                  />
                </MDBCol>
                <MDBCol>
                  <!-- Name input -->
                  <MDBInput
                    type="text"
                    label="Last name"
                    id="form9LastName"
                    v-model="form9LastName"
                  />
                </MDBCol>
                <MDBCol>
                  <!-- Email input -->
                  <MDBInput
                    type="email"
                    label="Email address"
                    id="form9Email2"
                    v-model="form9Email2"
                  />
                </MDBCol>
              </MDBRow>
            </template>
          
        
    
        
            
            <script>
              import { MDBRow, MDBCol, MDBInput } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRow, 
                  MDBCol,
                  MDBInput
                },
                setup() {
                  const form9Name = ref("");
                  const form9Email = ref("");
                  const form9FirstName = ref("");
                  const form9LastName = ref("");
                  const form9Email2 = ref("");

                  return {
                    form9Name,
                    form9Email,
                    form9FirstName,
                    form9LastName,
                    form9Email2
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRow, MDBCol, MDBInput } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              
              const form9Name = ref("");
              const form9Email = ref("");
              const form9FirstName = ref("");
              const form9LastName = ref("");
              const form9Email2 = ref("");
            </script>

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). 

        
            
            <template>
              <!-- Gutter g-1 -->
              <MDBRow class="g-1">
                <MDBCol>
                  <!-- Name input -->
                  <MDBInput
                    type="text"
                    label="Name"
                    id="form10Name"
                    v-model="form10Name"
                  />
                </MDBCol>
                <MDBCol>
                  <!-- Email input -->
                  <MDBInput
                    type="email"
                    label="Email address"
                    id="form10Email"
                    v-model="form10Email"
                  />
                </MDBCol>
              </MDBRow>

              <hr />

              <!-- Gutter g-5 -->
              <MDBRow class="g-5">
                <MDBCol>
                  <!-- Name input -->
                  <MDBInput
                    type="text"
                    label="Name"
                    id="form10Name2"
                    v-model="form10Name2"
                  />
                </MDBCol>
                <MDBCol>
                  <!-- Email input -->
                  <MDBInput
                    type="email"
                    label="Email address"
                    id="form10Email2"
                    v-model="form10Email2"
                  />
                </MDBCol>
              </MDBRow>
            </template>
          
        
    
        
            
            <script>
              import { MDBRow, MDBCol, MDBInput } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRow, 
                  MDBCol,
                  MDBInput
                },
                setup() {
                  const form10Name = ref("");
                  const form10Email = ref("");
                  const form10Name2 = ref("");
                  const form10Email2 = ref("");

                  return {
                    form10Name,
                    form10Email,
                    form10Name2,
                    form10Email2
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRow, MDBCol, MDBInput } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              
              const form10Name = ref("");
              const form10Email = ref("");
              const form10Name2 = ref("");
              const form10Email2 = ref("");
            </script>

Column sizing

As shown in the previous examples, our grid system allows you to place any number of MDBCols within a MDBRow. 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 MDBCols equally split the rest, with specific column properties like sm="7". 

        
            
            <template>
              <MDBRow class="g-3">
                <MDBCol sm="7">
                  <MDBInput
                    type="text"
                    label="Name"
                    id="form11Name"
                    v-model="form11Name"
                  />
                </MDBCol>
                <MDBCol sm>
                  <MDBInput
                    type="text"
                    label="Name"
                    id="form11Name2"
                    v-model="form11Name2"
                  />
                </MDBCol>
                <MDBCol sm>
                  <MDBInput
                    type="text"
                    label="Name"
                    id="form11Name3"
                    v-model="form11Name3"
                  />
                </MDBCol>
              </MDBRow>
            </template>
          
        
    
        
            
            <script>
              import { MDBRow, MDBCol, MDBInput } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRow, 
                  MDBCol,
                  MDBInput
                },
                setup() {
                  const form11Name = ref("");
                  const form11Name2 = ref("");
                  const form11Name3 = ref("");

                  return {
                    form11Name,
                    form11Name2,
                    form11Name3,
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRow, MDBCol, MDBInput } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              
              const form11Name = ref("");
              const form11Name2 = ref("");
              const form11Name3 = ref("");
            </script>

Auto-sizing

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

        
            
            <template>
              <MDBRow tag="form" class="gy-2 gx-3 align-items-center">
                <MDBCol auto>
                  <MDBInput
                    type="text"
                    label="Label"
                    id="form12Input1"
                    v-model="form12Input1"
                  />
                </MDBCol>
                <MDBCol auto>
                  <MDBCheckbox
                    label="Checked"
                    id="form12Checkbox"
                    v-model="form12Checkbox"
                  />
                </MDBCol>
                <MDBCol auto>
                  <MDBInput
                    type="text"
                    label="Label"
                    id="form12Input2"
                    v-model="form12Input2"
                  />
                </MDBCol>
                <MDBCol auto>
                  <MDBSwitch
                    label="Checked switch checkbox input"
                    v-model="form12Switch"
                  />
                </MDBCol>
                <MDBCol auto>
                  <MDBBtn color="primary">Submit</MDBBtn>
                </MDBCol>
              </MDBRow>
            </template>
          
        
    
        
            
            <script>
              import { MDBRow, MDBCol, MDBInput, MDBSwitch, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRow, 
                  MDBCol,
                  MDBInput,
                  MDBSwitch, 
                  MDBBtn
                },
                setup() {
                  const form12Input1 = ref("");
                  const form12Checkbox = ref(true);
                  const form12Input2 = ref("");
                  const form12Switch = ref(true);

                  return {
                    form12Input1,
                    form12Checkbox,
                    form12Input2,
                    form12Switch
                  };
                },
              };
            </script>
          
        
    
        
            
            <script>
              import { MDBRow, MDBCol, MDBInput, MDBSwitch, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              
              const form12Input1 = ref("");
              const form12Checkbox = ref(true);
              const form12Input2 = ref("");
              const form12Switch = ref(true);
            </script>

Inline forms

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

@
        
            
            <template>
              <MDBRow tag="form" cols="lg-auto" center class="g-3">
                <MDBCol col="12">
                  <MDBInput
                    inputGroup
                    :formOutline="false"
                    v-model="form13Input"
                    aria-describedby="inputGroupPrepend"
                    aria-label="Username"
                    placeholder="Username"
                  >
                    <template name="prepend">
                      <span class="input-group-text" id="inputGroupPrepend"
                        >@</span
                      >
                    </template>
                  </MDBInput>
                </MDBCol>

                <MDBCol col="12">
                  <MDBSelect
                    v-model:options="form13SelectOptions"
                    v-model:selected="form13Selected"
                  />
                </MDBCol>

                <MDBCol col="12">
                  <MDBCheckbox
                    label="Remember me"
                    id="form13Checkbox"
                    v-model="form13Checkbox"
                  />
                </MDBCol>

                <MDBCol col="12">
                  <MDBBtn type="submit" color="primary">Submit</MDBBtn>
                </MDBCol>
              </MDBRow>
            </template>
          
        
    
        
            
            <script>
              import { MDBRow, MDBCol, MDBInput, MDBSwitch, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBRow, 
                  MDBCol,
                  MDBInput,
                  MDBSwitch, 
                  MDBBtn
                },
                setup() {
                  const form12Input1 = ref("");
                  const form12Checkbox = ref(true);
                  const form12Input2 = ref("");
                  const form12Switch = ref(true);

                  return {
                    form12Input1,
                    form12Checkbox,
                    form12Input2,
                    form12Switch
                  };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBRow, MDBCol, MDBInput, MDBSwitch, MDBBtn } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const form12Input1 = ref("");
              const form12Checkbox = ref(true);
              const form12Input2 = ref("");
              const form12Switch = ref(true);
            </script>

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