63cd4e96b3
While `placeholder` is nominally valid per spec http://rawgit.com/w3c/html-api-map/master/index.html#accessible-name-and-description-calculation it is inelegant, a fallback, and not supported in ios/safari/voiceover and android/chrome/talkback, to name a few combinations `aria-describedby` is also not really the right tool for providing a name/label equivalent, so remove that from the list of possible alternative methods / clarify how it can be used
9.2 KiB
| layout | title | description | group |
|---|---|---|---|
| docs | Input group | Extend form controls with the input group. | components |
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Contents
- Will be replaced with the ToC, excluding the "Contents" header {:toc}
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 form-controls in a single input group.
{% example html %}
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.
{% example html %}
Checkboxes and radio addons
Place any checkbox or radio option within an input group's addon instead of text.
{% example html %}
Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
{% example html %}
Button addons
Buttons in input groups must wrapped in a .input-group-btn for proper alignment and sizing. This is required due to default browser styles that cannot be overridden.
{% example html %}
Buttons with dropdowns
{% example html %}
Segmented buttons
{% example html %}
Accessibility
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.
The exact technique to be used (<label> elements hidden using the .sr-only class, or use of the aria-label and aria-labelledby attributes, possibly in combination with aria-describedby) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.