Online

Bootstrap - Input Groups

Bootstrap input group component is very flexible and powerful component for creating the interactive form controls, however it is limited to textual input only.Using input groups you can easily prepend and append text or buttons to the text-based inputs.

By adding prepended and appended content to an input field, you can add common elements to the user's input. For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your application interface.

Basic Input Group-

The following example demonstrates the use of Basic Input Group in the above example -

Example :-

Result

@

.00

$ .00

Checkboxes and Radio Addons

You can preappend or append radio buttons and checkboxes instead of text as demonstrated in the following example -

Example

Result


Button Addons

You can even preappend or append buttons in input groups. Instead of .input-group-addon class, you'll need to use class .input-group-btn to wrap the buttons. This is required due to the default browser styles that cannot be overridden. Following examples demonstrates this -

Example

Result


Segmented Buttons

To segment button dropdowns in input groups, use the same general style as the dropdown button, but add a primary action along with the dropdown as can be seen in the following example -

Example

Result