REMOVED
This component has been removed from the Framework. Move to using form row group.
- Taxonomic name: M-TEXTBOX-GROUP
- Added on: v3.0.0 (15/09/17)
- Removed on: v5.0.0 (05/10/20)
Textbox group
Textbox groups are used where there is a conventional format to aid user input, for example pin numbers and sort codes.
Design and usage
- Fields which require a numerical value (eg. sort codes) should only allow numbers to be inputted
- Some fields may require the inputs to remain hidden when keyed - see hidden label versions below for details
- For date input, it may be prefereable to use a single auto-formatting textbox - see memorable date textbox page for further details
- Do not use for a group of short password inputs, ie. pin entry, as the keyboard on mobile devices can not be set to the most appropriate one for entry.
- Do not attempt to use any kind of autojump between the textboxes within a group; this has been prohibited by WCAG 2.0 - see the understanding WCAG SC 3.2.2 page for details.
Examples
Standard version - hidden labels
Interactive example
Code example
<fieldset class="m-form-row">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<ul class="m-textbox-group">
<li class="m-textbox-group__item">
<label class="m-textbox-group__item-label" for="...">...</label>
<input type="..." id="..." name="..." placeholder="..." class="a-textbox [ Modifiers ]" />
</li>
...
</ul>
</div>
</fieldset>Alternative version - visible labels
Interactive example
Code example
<fieldset class="m-form-row">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<ul class="m-textbox-group m-textbox-group--visible-label">
<li class="m-textbox-group__item">
<label class="m-textbox-group__item-label m-textbox-group__item-label--visible" for="...">...</label>
<input type="..." id="..." name="..." class="a-textbox [ Modifiers ]" />
</li>
...
</ul>
</div>
</fieldset>Valid textbox group
Interactive example
Code example
<fieldset class="m-form-row is-valid">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<p class="m-form-row__validation-message">...</p>
<ul class="m-textbox-group">
<li class="m-textbox-group__item">
<label class="m-textbox-group__item-label" for="...">...</label>
<input type="..." id="..." name="..." class="a-textbox [ Modifiers ]" />
</li>
...
</ul>
</div>
</fieldset>Errored textbox group
Interactive example
Code example
<fieldset class="m-form-row is-error">
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<p class="m-form-row__error-message">...</p>
<ul class="m-textbox-group">
<li class="m-textbox-group__item">
<label class="m-textbox-group__item-label" for="...">...</label>
<input type="..." id="..." name="..." class="a-textbox [ Modifiers ]" />
</li>
...
</ul>
</div>
</fieldset>Disabled textbox
Interactive example
Code example
<fieldset class="m-form-row is-disabled" disabled>
<legend class="a-label">...</legend>
<div class="m-form-row__content">
<ul class="m-textbox-group">
<li class="m-textbox-group__item">
<label class="m-textbox-group__item-label" for="...">...</label>
<input type="..." id="..." name="..." class="a-textbox [ Modifiers ]" disabled />
</li>
...
</ul>
</div>
</fieldset>Development and test
Notes for developers
Line-breaks are automatically removed from the input value.
Use the maxlength attribute to specify the maximum length of the value that can be entered.
Some browsers include the functionality to be able to show the value of any password entered into a password field. Do not attempt to either recreate this functionality or turn it off.
For more information on sizing the text inputs, please see the textbox page.
Input types
Care should be taken when choosing input field types for various uses, particularly with regard to number entry, as making the wrong selection could prevent users from inputting the required details into a form. For further information, see the form introduction page.
Important messages
To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to role="alert" and/or aria-live="assertive".
Using autocomplete
Users appreciate when websites save them time by automatically filling common fields like names, email addresses and other frequently used fields, plus it helps to reduce potential input errors, especially on virtual keyboards and small devices.
Browsers use many methods to determine which fields they can auto-populate based on previously specified data by the user, and you can give hints to the browser by providing both the name attribute and the autocomplete attribute on each input element.
Further details can be found in the developer notes on the form introduction page.
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.
- Clicking / pressing on a label for a single input field should cause the input to gain focus.
- Even though a label might not be visible for some of these fields, it still needs to be present for assistive technologies.
- If auto-jump is being used it should take users to the next box of the group when the current one has been completed and (with number inputs) crop the final box to the maxlength specified.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-textbox-group |
Base style for a group of text style inputs | Yes | .m-form-row__content > ul |
|
.m-textbox-group--visible-label |
Modifier to make the label for every text box within the group visible | .m-textbox-group |
||
.m-textbox-group__item |
Individual text box within the group | .m-textbox-group li |
||
.m-textbox-group__item-label |
Label for the individual text box within the group (hidden by default) | .m-textbox-group__item label |
Keyboard operations
- TAB
-
Tabbing to an input field should make the input clearly visually different so that the focus point on the page is obvious to the user.
Component releases
- Added on: v3.0.0 (15/09/17)
- Removed on: v5.0.0 (05/10/20)
Latest update:
- Component removed, replaced by form row group.