* Add maps * Redesign scss-docs rendering * Update other CSS sections * Fix linter
13 KiB
layout | title | description | group | toc |
---|---|---|---|---|
docs | 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. | forms | 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 <label>
s outside the input group.
{{< 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 >}}
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 >}}
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 >}}
Multiple inputs
While multiple <input>
s are supported visually, validation styles are only available for input groups with a single <input>
.
{{< example >}}
Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
{{< example >}}
Button addons
{{< example >}}
Buttons with dropdowns
{{< example >}}
Segmented buttons
{{< 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 >}}
Custom file input
{{< example >}}
CSS
Sass variables
{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}