Vue Input group
Vue Bootstrap input group
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Vue Bootstrap input group is used for collecting data entered by users. It usually contains buttons, text areas or other inputs. With this component, your forms are attractive and easy to customize.
Basic input groups
Basic styling for Bootstrap Input Group component
@
@example.com
https://example.com/users/
$
.00
With textarea
<template>
<section class="preview">
<mdb-input placeholder="Username" basic class="mb-3">
<span class="input-group-text" slot="prepend">@</span>
</mdb-input>
<mdb-input placeholder="Recipient's Username" basic class="mb-3">
<span class="input-group-text" slot="append">@example.com</span>
</mdb-input>
<label for="vanity">Your vanity URL</label>
<mdb-input id="vanity" basic class="mb-3">
<span class="input-group-text" slot="prepend">https://example.com/users/</span>
</mdb-input>
<mdb-input basic class="mb-3">
<span class="input-group-text" slot="prepend">$</span>
<span class="input-group-text" slot="append">.00</span>
</mdb-input>
<mdb-input type="textarea" basic>
<span class="input-group-text" slot="prepend">With textarea</span>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "BasicInputGroups",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Material input groups
Material Design styling for Bootstrap Input Group component
@
@example.com
https://example.com/users/
$
.00
With textarea
<template>
<section class="preview">
<mdb-input placeholder="Username" class="mb-3 mt-0">
<span class="input-group-text md-addon" slot="prepend">@</span>
</mdb-input>
<mdb-input placeholder="Recipient's Username" class="mb-3">
<span class="input-group-text md-addon" slot="append">@example.com</span>
</mdb-input>
<label for="vanity">Your vanity URL</label>
<mdb-input id="vanity" class="mb-3 mt-0">
<span class="input-group-text md-addon" slot="prepend">https://example.com/users/</span>
</mdb-input>
<mdb-input class="mb-2 mt-0">
<span class="input-group-text md-addon" slot="prepend">$</span>
<span class="input-group-text md-addon" slot="append">.00</span>
</mdb-input>
<mdb-input type="textarea" class="my-0">
<span class="input-group-text md-addon" slot="prepend">With textarea</span>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "MaterialInputGroups",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Sizing
Add the relative form sizing to the <input group> using the size proop and contents within will automatically resize.
Basic input group
Small
Default
Large
<template>
<section class="preview">
<mdb-input size="sm" basic class="mb-3">
<span class="input-group-text" slot="prepend">Small</span>
</mdb-input>
<mdb-input basic class="mb-3">
<span class="input-group-text" slot="prepend">Default</span>
</mdb-input>
<mdb-input size="lg" basic class="mb-3">
<span class="input-group-text" slot="prepend">Large</span>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "MaterialInputGroupsSizes",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Material input group
Small
Default
Large
<template>
<section class="preview">
<mdb-input size="sm" class="mb-3">
<span class="input-group-text" slot="prepend">Small</span>
</mdb-input>
<mdb-input class="mb-3">
<span class="input-group-text" slot="prepend">Default</span>
</mdb-input>
<mdb-input size="lg" class="mb-3">
<span class="input-group-text" slot="prepend">Large</span>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "MaterialInputGroupsSizes",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Checkboxes and radios
Place any checkbox or radio option within <input group> with noWrapper text to embed it inside. It will retain all regular features of the component, including ability to bind to the data object.
Basic input group MDB Pro component
<template>
<section class="preview">
<mdb-input basic class="mb-3">
<div class="input-group-text" slot="prepend">
<mdb-input type="checkbox" id="checkbox1" noWrapper/>
<label class="form-check-label" for="checkbox1"/>
</div>
</mdb-input>
<mdb-input basic class="mb-3">
<div class="input-group-text" slot="prepend">
<mdb-input type="checkbox" id="checkbox2" filled noWrapper/>
<label class="form-check-label" for="checkbox2"/>
</div>
</mdb-input>
<mdb-input basic class="mb-3">
<div class="input-group-text" slot="prepend">
<mdb-input type="radio" id="radio1" noWrapper value="prepend1"/>
<label class="form-check-label" for="radio1"/>
</div>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "BasicInputGroupsCheckboxRadio",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Material input group MDB Pro component
<template>
<section class="preview">
<mdb-input class="mb-3 mt-0">
<div class="input-group-text md-addon" slot="prepend" >
<mdb-input type="checkbox" id="checkbox3" noWrapper/>
<label class="form-check-label" for="checkbox3"/>
</div>
</mdb-input>
<mdb-input class="mb-3 mt-0">
<div class="input-group-text md-addon" slot="prepend" >
<mdb-input type="checkbox" id="checkbox4" filled noWrapper/>
<label class="form-check-label" for="checkbox4"/>
</div>
</mdb-input>
<mdb-input class="mb-3 mt-0">
<div class="input-group-text md-addon" slot="prepend" >
<mdb-input type="radio" id="radio2" noWrapper value="prepend2"/>
<label class="form-check-label" for="radio2"/>
</div>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "MaterialInputGroupsCheckboxRadio",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Multiple inputs
Such inputs, even though groupped, are independent in terms of data flow or custom validation. Note, that in case of such inputs, similarly as with checkboxes/radio buttons, the usual styling includding paddings, margins etc. are redundant, therefore they get embedded withe the noWrapper prop.
Basic input group
First and last name
<template>
<section class="preview">
<mdb-input basic aria-label="First name">
<span class="input-group-text" slot="prepend">First and last name</span>
<mdb-input noWrapper aria-label="Last name"/>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "BasicInputGroupsMultiple",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Material input group
First and last name
<template>
<section class="preview">
<mdb-input aria-label="First name" class="my-0" placeholder="Type sth">
<span class="input-group-text md-addon" slot="prepend">First and last name</span>
<mdb-input noWrapper aria-label="Last name" placeholder="Type sth"/>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "MaterialInputGroupsMultiple",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Multiple addon slots
Naturally, you can chain the elements slotted.
Basic input group
$
0.00
$
0.00
<template>
<section class="preview">
<mdb-input basic class="mb-3">
<span class="input-group-text" slot="prepend">$</span>
<span class="input-group-text" slot="prepend">0.00</span>
</mdb-input>
<mdb-input basic>
<span class="input-group-text" slot="append">$</span>
<span class="input-group-text" slot="append">0.00</span>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "BasicInputGroupsMultipleSlots",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Material input group
$
0.00
$
0.00
<template>
<section class="preview">
<mdb-input class="mt-0 mb-2">
<span class="input-group-text md-addon" slot="prepend">$</span>
<span class="input-group-text md-addon" slot="prepend">0.00</span>
</mdb-input>
<mdb-input class="mt-0 mb-2">
<span class="input-group-text md-addon" slot="append">$</span>
<span class="input-group-text md-addon" slot="append">0.00</span>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "MaterialInputGroupsMultipleSlots",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Buttons with dropdowns
Basic input group
<template>
<section class="preview">
<mdb-input basic class="mb-3" ariaLabel="Example text with button addon" ariaDescribedBy="button-addon1">
<mdb-dropdown slot="prepend">
<mdb-dropdown-toggle color="primary" size="md" slot="toggle" class="z-depth-0">dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-input>
<mdb-input basic class="mb-3" ariaLabel="Example text with button addon" ariaDescribedBy="button-addon1">
<mdb-dropdown slot="append">
<mdb-dropdown-toggle color="default" size="md" slot="toggle" class="z-depth-0">dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu color="default">
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-input>
</section>
</template>
<script>
import { mdbInput, mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem } from 'mdbvue';
export default {
name: "BasicInputGroupsDropdowns",
componens: {
mdbInput,
mdbDropdown,
mdbDropdownToggle,
mdbDropdownMenu,
mdbDropdownItem
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Material input group MDB Pro component
<template>
<section class="preview">
<mdb-input basic class="mb-3" ariaLabel="Example text with button addon" ariaDescribedBy="button-addon1">
<mdb-dropdown slot="prepend">
<mdb-dropdown-toggle outline="secondary" size="md" slot="toggle" class="z-depth-0">dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu color="secondary">
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-input>
<mdb-input basic class="mb-3" ariaLabel="Example text with button addon" ariaDescribedBy="button-addon1">
<mdb-dropdown slot="append">
<mdb-dropdown-toggle outline="info" size="md" slot="toggle" class="z-depth-0">dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
<div class="dropdown-divider"></div>
<mdb-dropdown-item>Separated link</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-input>
</section>
</template>
<script>
import { mdbInput, mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem } from 'mdbvue';
export default {
name: "MaterialInputGroupsDropdowns",
componens: {
mdbInput,
mdbDropdown,
mdbDropdownToggle,
mdbDropdownMenu,
mdbDropdownItem
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Custom forms
Additionally, nn case you would like a step back and use custom selects, MDBVue offers you styles to turn any browser default select input into something pleasing for the eye.
Custom select
<template>
<section class="preview">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</div>
<select class="browser-default custom-select" id="inputGroupSelect01" v-model="selected1">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<select class="browser-default custom-select" id="inputGroupSelect02" v-model="selected2">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<mdb-btn size="md" outline="mdb-color" group>button</mdb-btn>
</div>
<select class="browser-default custom-select" id="inputGroupSelect03" v-model="selected3" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group">
<select class="browser-default custom-select" id="inputGroupSelect04" v-model="selected4" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<mdb-btn size="md" outline="mdb-color" group>button</mdb-btn>
</div>
</div>
</section>
</template>
<script>
import { mdbBtn } from 'mdbvue';
export default {
name: "InputGroupsCustom",
componens: {
mdbBtn
},
data() {
return {
selectes1: '',
selectes2: '',
selectes3: '',
selectes4: '',
}
}
};
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Custom file input
Upload
Upload
<template>
<section class="preview">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose
file</label>
</div>
<div class="input-group-append">
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<mdb-btn size="md" outline="mdb-color" group>button</mdb-btn>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
<label class="custom-file-label" for="inputGroupFile03">Choose file</label>
</div>
</div>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<mdb-btn size="md" outline="mdb-color" group>button</mdb-btn>
</div>
</div>
</section>
</template>
<script>
import { mdbBtn } from 'mdbvue';
export default {
name: "InputGroupsCustomFile",
componens: {
mdbBtn,
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
</style>
Accessibility
Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
The exact technique to be used (<label> elements hidden using the .sr-only class,
or use of the aria-label and aria-labelledby attributes, possibly in combination with
aria-describedby) and what additional information will need to be conveyed will vary depending on the
exact type of interface widget you’re implementing. The examples in this section provide a few suggested,
case-specific approaches.
Since inputs in MDBVue have functional wrappers, including accessibility attributes onti the components directly leads to some undesired screen readings. To avoid there and to keep your project fully a11y-able, use props going all the way to the actual inputs - ariaLabel, ariaDescribedBy and ariaLabelledBy.
Input group examples & customization
Colorful input groups
@
$
.00
$
0.00
@example.com
https://example.com/users/
<template>
<section class="preview">
<mdb-input basic placeholder="Username" class="mb-3 mt-0 md-form form-sm form-1" inputClass="amber-border">
<span class="input-group-text amber lighten-3 black-text" slot="prepend">@</span>
</mdb-input>
<mdb-input basic class="mb-2 mt-0 md-form form-1 form-sm" inputClass="red-border">
<span class="input-group-text red lighten-3 black-text" slot="prepend">$</span>
<span class="input-group-text red lighten-3 black-text" slot="prepend">0.00</span>
</mdb-input>
<mdb-input basic class="mb-2 mt-0 md-form form-2 form-sm" inputClass="lime-border" ariaLabel="Amount (to the nearest dollar)">
<span class="input-group-text lime lighten-2 black-text" slot="prepend">$</span>
<span class="input-group-text lime lighten-2 black-text" slot="append">.00</span>
</mdb-input>
<mdb-input basic placeholder="Recipient's Username" class="mb-3 md-form form-sm form-3" ariaDescribedBy="basic-addon12" inputClass="purple-border">
<span class="input-group-text purple lighten-3 black-text" slot="append" id="basic-addon12">@example.com</span>
</mdb-input>
<label for="vanity">Your vanity URL</label>
<mdb-input basic id="vanity" class="mb-3 mt-0 md-form form-sm form-1" ariaDescribedBy="basic-addon33" inputClass="blue-border">
<span class="input-group-text blue lighten-3 black-text" slot="prepend" id="basic-addon33">https://example.com/users/</span>
</mdb-input>
</section>
</template>
<script>
import { mdbInput } from 'mdbvue';
export default {
name: "ColorfulInputGroupExample",
componens: {
mdbInput
}
}
</script>
<style>
section.preview {
border: 1px solid #e0e0e0;
padding: 15px;
}
.input-group.md-form.form-sm.form-1 input {
border: 1px solid #bdbdbd;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-1 input[type=text]:focus:not([readonly]).red-border {
border: 1px solid #ef9a9a;
box-shadow: none;
}
.input-group.md-form.form-sm.form-1 input[type=text]:focus:not([readonly]).amber-border {
border: 1px solid #ffca28;
box-shadow: none;
}
.input-group.md-form.form-sm.form-1 input[type=text]:focus:not([readonly]).blue-border {
border: 1px solid #64b5f6;
box-shadow: none;
}
.input-group.md-form.form-sm.form-2 input {
border: 1px solid #bdbdbd;
}
.input-group.md-form.form-sm.form-2 input[type=text]:focus:not([readonly]).lime-border {
border: 1px solid #cddc39;
box-shadow: none;
}
.input-group.md-form.form-sm.form-3 input {
border: 1px solid #bdbdbd;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-3 input[type=text]:focus:not([readonly]).purple-border {
border: 1px solid #ce93d8;
box-shadow: none;
}
</style>