diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index 8d42b27cecd8..5d9a2f9c072a 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -19,7 +19,7 @@

Don't mix with other components

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.

-

The exact technique to be used (<label> elements hidden using the .sr-only class, or use of the aria-label, aria-labelledby, aria-describedby, title or placeholder attribute) 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.

+

The exact technique to be used (visible <label> elements, <label> elements hidden using the .sr-only class, or use of the aria-label, aria-labelledby, aria-describedby, title or placeholder attribute) 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.

Basic example

@@ -42,6 +42,12 @@

Basic example

.00 +
+ +
+ https://example.com/users/ + +
{% highlight html %}
@@ -59,6 +65,12 @@

Basic example

.00
+ + +
+ https://example.com/users/ + +
{% endhighlight %}

Sizing