Default Input group

Add span with .input-group-text class before <input>

@

Input group with Right Addon

Add span with .input-group-text class after <input>

@example.com

Input group Addon on both side

Add span with .input-group-text class to before & after <input>

$
.00

Input group addon with Icon

Input group addon with Right Icon

Input group addon with icon both side

Input group addon with Spinner

Input group addon with Right Spinner

Input group addon with Spinner both side

Input group with Checkbox

Input group with checkbox

Add span with .input-group-text class before <input> text and Add checkbox inside.

Input group with Right Addon

Add span with .input-group-text class after <input> text and Add checkbox inside.

Input group Addon on both side

@example.com

Input group with Radio

Input group with radio

Add span with .input-group-text class before <input> text and Add radio inside.

Input group with Right Addon

Add span with .input-group-text class after <input> text and Add radio inside.

Input group Addon on both side

@example.com

Input group with Switchery

Input group with Switchery

Add span with .input-group-text class before <input> text and Add switchery inside.

Input group with Right Switchery

Add span with .input-group-text class after <input> text and Add switchery inside.

Input group with switchery on both side

Input Groups Sizing

Large Input group

Add .input-group-lg class to .input-group for Large addon.

@

Default Input group

Default Input Group addon.

.00

Small Input group

Add .input-group-sm class to .input-group for small addon.

@example.com

Input Groups Buttons

Input group Button On Left

Add button inside before <input>

Input group Button On Right

Add button inside after <input>

Input group Button On Both Side

Add button inside before & after <input>

Input group Icon Button On Left

Add button inside before <input>

Input group Button On Right

Add button inside after <input>

Input group Button On Both Side

Add button inside before & after <input>

Buttons with Dropdown

Input group Dropdown On Left

Input group Dropdown On Right

Input group Dropdown On Both Side

Segmented Buttons with Dropdown

Segmented Button On Left

Segmented Button On Right

Segmented Buttons On Both Side

Color options

Default Input group

Add color using .bg-COLORNAME class to the addon.

@

Input group with Right Addon

Add color using .bg-COLORNAME class to the addon.

Input group Addon on both side

Add color using .bg-COLORNAME class to the addon and input with lighten/darken color.

.00

Input group Button On Left

Input group Button On Right

Input group Button On Both Side