Input Groups

In Material Admin Pro, input groups are are an extension of Bootstrap's form controls which add text, buttons, or button groups on either side of form inputs.

Since Material has no specification for input groups, the Bootstrap defaults have been restyled to match the Material Design system as closely as possible.

Default

By default, the Bootstrap input groups allow the addition of input group text addings before, after, or in-between inputs. Multiple addons and multiple inputs are supported. Input groups also support the text area element.

Prepend the input

Append the input

@example.com

Before and after input

$ .00

Addon between multiple inputs

With textarea

Comment:

Sizing

Small, default, and large sizing options are supported as well. Sizing individual input group eleements is not supported however.

Small

Default

Large

Button Addons

Input groups also support button addons in place of text. They can be used alongside input group text, or independently. Button dropdowns are also supported along with any button color or style referenced on the button component page.

For even more input group options, like custom selects and file uploads, visit Bootstrap's input group documentation page.

Default

Sizing

Button Addons

Related Links