Plus/Minus number textbox

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

Errored plus/minus textbox

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:

<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-b.css" rel="stylesheet" />
<!--[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

<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>

<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>

<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>

<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>

<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.