Skip to content

Elements:Forms Input Groups

Input groups allow you to easily group form elements and buttons with form inputs.

Examples

Wrap the elements within a wrapper with the class .input-group and then add 1 or more span elements with the class .input-group-addon before or after your form input or button.

@
@example.com
https://example.com/users/
$ .00
$ 0.00
$
$ 0.00

Rounded

Add the class .input-group-rounded to the .input-group element to make the input groups rounded, similar to the rounded buttons.

@
@

Sizes

Add the class .input-group-lg to enlarge input groups.

@

@

Checkboxes and radio addons

You can also add checkbox or radio elements within the .input-group-addon element.


Button add-ons

Buttons can also be used as input group "add-ons" simply by changing the .input-group-addon class to .input-group-btn and including a standard button.

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage