diff --git a/docs/components/forms.md b/docs/components/forms.md index f40904f8ec..ee001a4730 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -517,19 +517,33 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes like `.text-muted`, you can create much more flexible help text as you need it. +{% callout warning %} +#### Associating help text with form controls + +Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control. +{% endcallout %} + Inline text can use any typical inline HTML element (be it a ``, ``, or something else). {% example html %} - - Some inline text with a small tag looks like this. - +
+
+ + + + Must be 8-20 characters long. + +
+
{% endexample %} Block help text—for below inputs or for longer lines of help text—can be easily achieved with a `

`. {% example html %} -

- A block of help text that breaks onto a new line and may extend beyond one line. + + +

+ Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters or emoji.

{% endexample %}