Navigation
Victoria Baker
 Santa Ana, CA

Forms- Input Groups

StatisticsInvoicesSchedule
HomeFormsInput groups
Support
Settings
Account securityAnalyticsAccessibility
All settings
Input group addons

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-groupwith an .input-group-prependto prepend or .input-group-appendto append elements to a single .form-control. Place one add-on or button on either side of an input. You may also place one on both sides of an input. While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

Text addon
@
$0.00
%
$0.00
$.00
Icon addon
Spinner addon
Color options
Input group buttons

Optional buttons as addons. Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-prepend (append)to wrap the buttons. Input group buttons support all available button options except sizing - all buttons height will be adjusted automatically according to the input group size.

Button addons
Button dropdown addons
ActionAnother actionSomething else hereOne more line
ActionAnother actionSomething else hereOne more line
ActionAnother actionSomething else hereOne more line
ActionAnother actionSomething else hereOne more line
Segmented button addons
ActionAnother actionSomething else hereOne more line
ActionAnother actionSomething else hereOne more line
ActionAnother actionSomething else hereOne more line
ActionAnother actionSomething else hereOne more line
Color options
Input group options

Besides default addon options, input groups support different variations of checkboxes, radio buttons, switches, contextual validation state options, icons in different positions. All colors can be easily changed in LESS variables, options and positions also can be mixed. However avoid using <select>elements here as they cannot be fully styled in WebKit browsers and <textarea>elements here as their rows attribute will not be respected in some cases.

Sizing options
Validation states
Success state helper
Invalid state helper
Valid state helper
Error input group helper
Addon options
Touchspin spinners
Touch friendly input spinner component
Bootstrap touchspin

Basically Touchspin uses default Bootstrap input-groupcomponent styling with ability to add extra classes to the buttons and addons to match your design perfectly.

Advanced spinners

Depending on your needs, you can easily swith off mousewheel support, change steps and increments, use more complex examples with button groups and dropdowns.

ActionAnother actionSomething else here
Separated link
Horizontal spinners

Touchspin supports default Bootstrap input-groupcomponent sizing classes, applied to the input or wrapped in divwith these classes.

Vertical spinners

Also Touchspin library supports verticalspinner controls orientation, that appear on the right side. Buttons and icons are fully customizable.