Plus/Minus number textbox
Taxonomic name: A-PLUSMINUS
Extension: FORMS-EXTENDED-B
v.4.6.0 - Updated 01/02/19. Archives
Atom
This control allows users to select a value through interaction with the plus and minus buttons, or by directly entering a value into the field.
- Can be used to enter values between a range of zero to nine
- In instances where the highest value we require is nine (or more), and no further information is required, display a message to the user to inform them that no further information is required.
- If higher increments or further information is required, an alternative such as drop down list or textbox should be used.
Examples
Standard plus/minus textbox
Valid plus/minus textbox
This is valid
Errored plus/minus textbox
This is not valid
Disabled plus/minus textbox
Notes for developers
Field labels should be displayed outside of the input not inside.
Line-breaks are automatically removed from the input value.
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.
Ensure that the autocomplete
attribute is set for off for any field that may have privacy concerns eg. passwords, card/account numbers etc.
When disabling the textbox, do not solely rely on the is-disabled
class, ensure that the disabled
attribute is set on the input field.
If the native form validation needs to be disabled set the novalidate
attribute on the form.
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.
Extension component
This component forms part of the 'forms-extended-b' extension and so requires additional stylesheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheets:
<!--[if !IE | gt IE 8]><!-->
<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-b.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lte IE 8]>
<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-b-unmq.css" rel="stylesheet" />
<![endif]-->
Notes for testers
- Number inputs are understood by all browsers, so they fall back to being a standard text input field. This means that they may allow the entry of invalid characters, so any invalid entries should be highlighted when the form is submitted like any other errors.
- 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 (as will clicking on the plus / minus buttons).
- Sensible minimum / maximum values must be set to allow the buttons work (negative numbers are permissible).
- Ensure that autofill is not available for sensitive fields such as password, card/account number etc.
- Users should be able to copy and paste if necessary.
Code Examples
Standard plus/minus textbox
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<input type="number" id="..." name="..." class="a-textbox" value="..." min="..." max="..." data-module="a-plusminus" />
</div>
</div>
Valid plus/minus textbox
This is valid
<div class="m-form-row is-valid">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<p class="m-form-row__validation-message">...</p>
<input type="number" id="..." name="..." class="a-textbox" value="..." min="..." max="..." aria-invalid="false" data-module="a-plusminus" />
</div>
</div>
Errored plus/minus textbox
This is not valid
<div class="m-form-row is-error">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<p class="m-form-row__error-message">...</p>
<input type="number" id="..." name="..." class="a-textbox" value="..." min="..." max="..." aria-invalid="true" data-module="a-plusminus" />
</div>
</div>
Disabled plus/minus textbox
<div class="m-form-row is-disabled">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<input type="number" id="..." name="..." class="a-textbox" value="..." min="..." max="..." disabled data-module="a-plusminus" />
</div>
</div>
Required plus/minus textbox
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<input type="number" id="..." name="..." class="a-textbox" value="..." min="..." max="..." aria-required="true" data-module="a-plusminus" />
</div>
</div>
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.