Please move to using the latest version of this component as soon as possible.
Taxonomic name: M-FORM-ROW__EXPLANATORY-TEXT
v.1.0.0 - Updated 14/03/17.
Indicate mandatory fields with an asterisk (*) at the end of the label text, and provide a legend at the top of the page.
Field labels should be displayed outside of the input, left aligned (above for login layout or mobile and left otherwise).
For when a field needs some extra instruction on how to fill it in correctly.
This is to only be used with a contstrained width form eg. login
Notes for developers
If an explanatory text link is to be used in conjunction with standard explanatory text the text link must be first.
Notes for testers
Ensure that all form fields have a correctly associated label. This not only provides context to each field for assistive technology users but also a larger clickable area to select the field.
<div class="form-row"> <label class="form-label" for="..."> ... <span class="form-label__desc">...</span> </label> <div class="form-row__content"> <input class="form-input" type="..." id="..." /> ... </div> </div>
<div class="form-row"> <span class="form-label"> <label for="...">...</label> <p class="form-label__link"><a href="...">...<a></p> </span> <div class="form-row__content"> <input class="form-input" type="..." id="..." /> ... </div> </div>
The following table gives you a quick overview of the CSS classes that can be applied.
||Styling for additional copy to be included within the label eg. instruction on how to correctly fill in the field||Yes||
||Modified for a form label that is to include a link||Yes||
||Mainly designed to be used on a constrained width form.|
||Styling a link to be shown beside a label||Yes||
||Mainly designed to be used on a constrained width form. The link must follow the form input|