Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

#

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

@

@example.com

https://example.com/users/

$ .00

#

Set size property for input to be applied to input and its add-ons.

Small

Default

Large

#

Place any checkbox or radio option within an input group’s addon instead of text.

#

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$ 0.00

#

#

Add icons to your input to suggest users what they should enter or inform them of the current state of a form element.