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.
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.
<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 totype="submit", so strive to be specific and always include atype. -
You can disable every form element within a form with the
disabledattribute 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.
<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.
<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.
<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 TW Elements you can also check out the Tailwind forms documentation.