Input group addons

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-prepend to prepend or .input-group-append to 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
Segmented button addons
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
Addon options
Touchspin spinners
Touch friendly input spinner component
Bootstrap touchspin

Basically Touchspin uses default Bootstrap input-group component 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.

Horizontal spinners

Touchspin supports default Bootstrap input-group component sizing classes, applied to the input or wrapped in div with these classes.

Vertical spinners

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