Atomic Bulldog - UI/pattern library

1.9.1 - Form Text

Source: atoms/forms/_form-text.scss, line 20

Open in new window

Use to describe the input or form-group. Use an id for aria-describedby

This class can be used to show an error message with .has-error or a valid message with .is-valid. These messages are displayed none by default, see molecule/form-group

Example:

We'll never share your email with anyone else.

Opps, please enter a valid email.

Email is valid.

<p id="emailHelp" class="form-text">We'll never share your email with anyone else.</p>
<p class="form-text has-error" style="display: block">Opps, please enter a valid email.</p> <!-style="display: block" just for KSS-->
<p class="form-text is-valid" style="display: block">Email is valid.</p> <!-style="display: block" just for KSS-->