Name	Size	Mode	Actions
checks-radios.md	13316	0644	editdlrm
floating-labels.md	6900	0644	editdlrm
form-control.md	7767	0644	editdlrm
input-group.md	13067	0644	editdlrm
layout.md	13138	0644	editdlrm
overview.md	6302	0644	editdlrm
range.md	1801	0644	editdlrm
select.md	2407	0644	editdlrm
validation.md	18037	0644	editdlrm

--- layout: docs title: Input group description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. group: forms toc: true --- ## 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. Remember to place ``s outside the input group. {{< example >}}

@

@example.com

Your vanity URL

https://example.com/users/

Example help text goes outside the input group.

$ .00

@

With textarea

{{< /example >}} ## Wrapping Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`. {{< example >}}

@

{{< /example >}} ## Sizing Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element. **Sizing on the individual input group elements isn't supported.** {{< example >}}

Small

Default

Large

{{< /example >}} ## Checkboxes and radios Place any checkbox or radio option within an input group's addon instead of text. We recommend adding `.mt-0` to the `.form-check-input` when there's no visible text next to the input. {{< example >}}

{{< /example >}} ## Multiple inputs While multiple ``s are supported visually, validation styles are only available for input groups with a single ``. {{< example >}}

First and last name

{{< /example >}} ## Multiple addons Multiple add-ons are supported and can be mixed with checkbox and radio input versions. {{< example >}}

$ 0.00

$ 0.00

{{< /example >}} ## Button addons {{< example >}}

Button

Button

Button Button

Button Button

{{< /example >}} ## Buttons with dropdowns {{< example >}}

Dropdown

• Action
• Another action
• Something else here

• ---

• Separated link

Dropdown

• Action
• Another action
• Something else here

• ---

• Separated link

Dropdown

• Action before
• Another action before
• Something else here

• ---

• Separated link

Dropdown

• Action
• Another action
• Something else here

• ---

• Separated link

{{< /example >}} ## Segmented buttons {{< example >}}

Action Toggle Dropdown

• Action
• Another action
• Something else here

• ---

• Separated link

Action Toggle Dropdown

• Action
• Another action
• Something else here

• ---

• Separated link

{{< /example >}} ## Custom forms Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported. ### Custom select {{< example >}}

Options Choose... One Two Three

Choose... One Two Three Options

Button Choose... One Two Three

Choose... One Two Three Button

{{< /example >}} ### Custom file input {{< example >}}

Upload

Upload

Button

Button

{{< /example >}} ## CSS ### Sass variables {{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}