Vue Input group

Vue Input group component

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Basic example

Place one add-on or button inside MDBInput<>'s default or #prepend slot. You may also place one on both sides of an input

@
@example.com
https://example.com/users/
$ .00
@
With textarea
Show code

Wrapping

Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with adding flex-nowrap to wrapperClass property.

@
Show code

Sizing

Add the relative form sizing value to the inputGroup property and contents within will automatically resize — no need for repeating the form control size properties on each element.

Sizing on the individual input group elements isn’t supported.
Small
Default
Large
Show code

No border

Add .border-0 class to the .input-group-text to remove the border.

@
@example.com
https://example.com/users/
$ .00
With textarea
Show code

Checkboxes and radios

Place any checkbox or radio option within an input group’s addon instead of text.

Show code

Multiple inputs

While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>. Add :wrap="false" to a nested input element.

First and last name
Show code

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$ 0.00
$ 0.00
Show code

Button addons

Show code

Buttons with dropdowns

Show code

Segmented buttons

Show code

File input

Show code

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 .visually-hidden 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.