#### Forms - Input Groups

Statistics Invoices Schedule

##### 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
Left text addon
@
Multiple left addons
$ 0.00
Right text addon
%
Multiple right addons
$ 0.00
Left and right text addons
$ .00
Icon addon
Left icon addon
Right icon addon
Left and right icon addons
Spinner addon
Left spinner addon
Right spinner addon
Left and right spinner addons
Color options
Contextual class
Custom color class
Color everything

##### 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
Left button
Right button
Left and right buttons
Button dropdown addons
Left button dropdown
Right button dropdown
Left and right button dropdowns
Segmented button addons
Left button
Right button
Left and right buttons
Color options
Contextual button
Custom color button

##### 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
Large input group
Default input group
Small input group
Validation states
Valid state
Success state helper
Invalid state
Invalid state helper
Valid with icon
Valid state helper
Invalid with icon
Error input group helper
Addon options
Default checkbox
Styled checkbox
Default radio button
Styled radio button
Switchery toggle

###### 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.

Example with postfix:
Example with prefix:
Init with empty value:
Incremental/decremental step on up/down change:

##### 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.

Button group example
Value attribute is not set: applying settings.initval
Value is set explicitly to 33: skipping settings.initval
No mousewheel support:

##### Horizontal spinners

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

Large spinner
Default spinner
Small spinner

##### Vertical spinners

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

Large spinner
Default spinner
Small spinner