Memorable date textbox
Taxonomic name: A-TEXTBOX-FORMAT
CORE COMPONENT
v.4.7.0 - Updated 01/03/19. Archives
Atom
Memorable date textboxes are used to aid user input by formatting single fields, for example pin numbers and sort codes.
It is still possible (and permissable) to use standard textbox groups with individual inputs - see the textbox group page for further details.
Structure
- Uses a standard Framework form text field with a text keyboard
- If used for inputting an expiry date, the date can be expressed in the following formats: MM/YY and MM/YYYY
- If used for inputting a date of birth, the date can be expressed in the following formats: DD/MM/YYYY, DD.MM.YYYY, MM,DD,YYYY, YYYY-MM-DD)
- Symbols can be selected if a user tries to when editing a previously entered date; the autoformatting doesn't happen until a user continues to edit the number
- When using the backspace key, any symbols are removed for the customers, they don't have to delete them manually
- Do not use the HTML5 number, phone or date attributes
- Do not use this pattern in conjunction with a date picker to add values
Labels
- Inputting format must always be shown with the form hint text inside the field
Non-JS requirements and considerations
- No automatic formatting happens; the date field is just a textbox
Placement
- Follows existing padding rules and form textbox placement
Use cases and exception scenarios
- Only for inputting dates, eg. date of birth and expiry dates
- Do not use for numeric inputs other than dates
Examples
Expiry date
Date of birth
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; the value should also include the number of spacers required (eg, DD/MM/YYYY would require maxlength="10"
; the a-textbox--x-character
modifier should include the same character count (so, for the same example as previously, a-textbox--10-character
The pattern
attribute must be set on the text input eg. for DD/MM/YYYY the attibute should have a value of \d{2}\/\d{2}\/\d{4}
.
The data-format
refers to the number of characters in each block; supported formats are:
- "22"
- "24"
- "222"
- "224"
- "422"
The data-spacer
refers to the spacer character inserted between block; supported spacer characters are:
- "/"
- "-"
- "."
- ","
- " "
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
Code Examples
Expiry date
<div class="m-form-row [ Modifiers ]">
<label class="a-label">...</label>
<div class="m-form-row__content">
<input type="text" id="..." name="..." placeholder="..." pattern="..." class="a-textbox [ Modifiers ]" maxlength="..." data-module="a-textbox-format" data-format="..." data-spacer="..." />
</div>
</div>
Expiry date
<div class="m-form-row [ Modifiers ]">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<input type="text" id="..." name="..." placeholder="..." pattern="..." class="a-textbox [ Modifiers ]" maxlength="..." data-module="a-textbox-format" data-format="..." data-spacer="..." />
</div>
</div>
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class | Outcome | Required | Applied to | Comments |
---|---|---|---|---|
.a-textbox |
Styling for the text input | Yes | input |
|
.a-textbox--3-character |
Modifier for restricting the textbox length for 3 characters | .a-textbox |
maxlength must be set to 3; use for 22 format |
|
.a-textbox--7-character |
Modifier for restricting the textbox length for 7 characters | .a-textbox |
maxlength must be set to 7; use for 24 format |
|
.a-textbox--8-character |
Modifier for restricting the textbox length for 8 characters | .a-textbox |
maxlength must be set to 8; use for 222 format |
|
.a-textbox--10-character |
Modifier for restricting the textbox length for 10 characters | .a-textbox |
maxlength must be set to 10; use for 224 and 422 formats |
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.