diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index 8d42b27cecd81f8024247dc73d43787082e391b2..5d9a2f9c072aa29f664b8b65af988434ec5bc7ed 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -19,7 +19,7 @@ <div class="bs-callout bs-callout-warning" id="callout-inputgroup-form-labels"> <h4>Always add labels</h4> <p>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.</p> - <p>The exact technique to be used (<code><label></code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> 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.</p> + <p>The exact technique to be used (visible <code><label></code> elements, <code><label></code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> 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.</p> </div> <h2 id="input-groups-basic">Basic example</h2> @@ -42,6 +42,12 @@ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span> </div> + <br> + <label for="basic-url">Your vanity URL</label> + <div class="input-group"> + <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span> + <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> + </div> </form> {% highlight html %} <div class="input-group"> @@ -59,6 +65,12 @@ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span> </div> + +<label for="basic-url">Your vanity URL</label> +<div class="input-group"> + <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span> + <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> +</div> {% endhighlight %} <h2 id="input-groups-sizing">Sizing</h2>