diff --git a/docs/components/input-group.md b/docs/components/input-group.md index fc91ac9787..6681485baa 100644 --- a/docs/components/input-group.md +++ b/docs/components/input-group.md @@ -3,20 +3,12 @@ layout: page title: Input group --- -Extend form controls by adding text or buttons before, after, or on both sides of any text-based ``. Use `.input-group` with an `.input-group-addon` to prepend or append elements to a single `.form-control`. +Easily extend form controls by adding text, buttons, or button groups on either side of textual ``s. -
-

Textual <input>s only

-

Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.

-

Tooltips & popovers in input groups require special setting

When using tooltips or popovers on elements within an .input-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

-
-

Don't mix with other components

-

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

-

Always add labels

Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.

@@ -25,11 +17,7 @@ Extend form controls by adding text or buttons before, after, or on both sides o ## 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. - -**We do not support multiple add-ons on a single side.** - -**We do not support multiple form-controls in a single input group.** +Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.** {% example html %}