- Taxonomic name: M-SHOW-MORE
- Added on: v5.0.0 (05/10/20)
- Updated on: v5.5.0 (23/03/21)
Form help show more
The show more component help allows users to view more complete information when it is advantageous to hide a certain amount of it from them by default. In the case of forms, it allows users to view extra detail to help them to complete a form field.
Design and usage
This page contains visual and markup examples only; for full details, see show more.
Examples
Standard
Interactive example
Code example
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<div class="m-show-more" id="..." data-module="m-show-more" data-description="...">
<p>...</p>
...
</div>
<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" aria-describedby="..." />
</div>
</div>With custom CTAs
Interactive example
Code example
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<div class="m-show-more" id="..." data-module="m-show-more" data-description="..." data-expand="..." data-contract="...">
<p>...</p>
...
</div>
<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" aria-describedby="..." />
</div>
</div>Inline variant
This variant is not recommended for general use and should only be included if the retention of the visual treatment from the outgoing Form row help is absolutely required.
Interactive example
Code example
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<div class="m-show-more m-show-more--inline" id="..." data-module="m-show-more" data-description="...">
<p>...</p>
...
</div>
<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" aria-describedby="..." />
</div>
</div>Development and test
Notes for developers
This page contains visual and markup examples only; before using, see show more for full details.
Aria usage for errors and help text
To aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occured, some additional aria attributes are now recommended to be applied across all form fields/rows.
All form row help, explanatory text, form row instructions and form row errors must have a unique id assigned to them and be appropriately linked to either the individual form input or the form row using aria-describedby. This ensures that the help text is read out immediately on focus of the form input/fieldset. When there is more that one item that requires referencing within the aria-describedby attribute the id values must be supplied in the form of a space separated list. For example if there is an error with id of 'err1' and help text with id of 'help1' the value for the aria-describedby attribute would be 'err1 help1'.
All inline form error messages should start with the hidden text 'Error: ' so that when read by out by a screen reader it is immediately clear that the text being read is an error message.
All erroring form fields (or fieldset if a group or radios/checkboxes) must have aria-invalid="true" set on them, ensuring that when a user focus' on an errored form field, the field will be announced as invalid, so the user is then aware that there in an issue that requires fixing.
When linking help or errors, or even adding aria-invalid to the markup careful consideration must be taken as to where it is most appropriate to apply the value. The following rules should be used to decide where the attribute(s) should be applied.
- Single form field - All attributes should be applied directly to that form field
- Group of form fields but only one in error or help text applies to only one - Apply the attribute(s) to the only field in error or where the help text applies
- Group of form field where all in error or the help text applies to all - Apply the attribute(s) to the groups surrounding fieldset (form row)
There may situations where more than one of these rules applies to the overall form row for example a date range where the instruction text applies to both fields so should be linked to the fieldset for the date range but one of the two fields is in error so the error should be linked to just that field not to the fieldset.
Component releases
- Added on: v5.0.0 (05/10/20)
- Updated on: v5.5.0 (23/03/21)
Latest update:
- updated: Additional aria attributes are now recommended to be applied across all form fields/rows so as to aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occurred.