Input Group

A group for input to display information in before or after input

Basic Input Groups

Add span with .input-group-text class before <input> for input-group-prepend and add span with .input-group-text class after <input> for input-group-append.

@
@example.com
$ .00

Multiple Inputs

While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

First and last name

Multiple Addons

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

$ 0.00
$ 0.00

Input Groups with Checkboxes and Radios

Input Groups can use with checkboxes and radio buttons also. For it add code for .checkbox class and .radio class respectively.

Input Groups with different sizes

Add .input-group-{lg/sm} class to .input-group for Large/Small addon/prepend.

Small
Default
Large

Input Groups with Buttons

Add <button> before or after <input> tag

Input Groups with Dropdown

Add <button> with .dropdown-toggle class and add dropdown-menu after it to get input group with dropdown.

Custom file input