#### Input groups

Loading...

#### Button addons

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

#### Custom forms

Input groups include support for `custom selects and custom file inputs`. Browser default versions of these are not supported.

Options
Options

#### Custom file input

Input groups include support for custom selects and custom `file uploads`. Browser default versions of these are not supported.

Upload
Verify

#### Buttons with dropdowns

Use the`.input-group` and `[aria-label='']` through buttons with dropdowns.

#### Segmented buttons

Multiple add-ons are supported and can be mixed with`dropdowns` versions.

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

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

Small
Default
Large

#### Multiple inputs

While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.

First and last name
$0.00
$0.00

#### Basic input groups

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 `<label>`s outside the input group.

###### Basic

@
@example.com
Your vanity URL
https://example.com/
$ .00
@
With textarea

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

@

#### Variation of addons

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 `<label>`s outside the input group.

Left Addon
Right Addon
Joint Addon
0.00
Left & Right Addon
dashed style
Flat style
Raise style
Left & Right Addon