Textbox

Taxonomic name: A-TEXTBOX

Beta v.2.1.0 - Updated 23/10/17. Archives

Atom

The text box control allows users to add a response over a single line.

  • For use with the following input types:

    • Email
    • Number
    • Password
    • Search
    • Telephone
    • Text
    • Url
  • Text fields with a standard character length (eg. dates, telephone numbers, post codes etc), should be appropriately restricted. The length of the field should be appropriate to the information being asked for.
  • Field labels should be displayed outside of the input field.
  • Ensure text area 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 text area field should cause the input to gain focus.
  • Users should be allowed to copy and paste if necessary.
  • See style guide for detailed colour and typography rules.
  • Do not use inappropriate restrictions, eg. password fields or email addresses may require longer line lengths.

For documentation on texboxes prior to v.1.1.4 see our deprecated input documentation. If you are using v.1.1.4 or above please move to using this version of the textbox as soon as possible.

Examples

Standard textbox

Valid textbox

This is a valid email

Errored textbox

Please enter a valid email

Disabled textbox

Prefix and suffix symbols

Restricted length fields (1 - 11)

Please enter a valid email

Notes for developers

Field labels should be displayed outside of the input not inside.

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.

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.

Notes for testers

Not all the input types are understood by all browsers so they fall back to being a standard text input. This means that they may allow the entry of invalid characters, 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.

Ensure that autofill is not available for sensative fields such as password, card/account number etc.

Users should be able to copy and paste if necessary.

If the field has been restricted in length the maximum number of characters allowed must also be restrcited. Note: many browsers will not do this for number field and older browser will not do this at all.

Code Examples

Standard textbox

<div class="m-form-row m-form-row--light">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<input type="..." id="..." name="..." placeholder="..." class="a-textbox [ Modifier ]" />
	</div>
</div>

Valid textbox

This is a valid email

<div class="m-form-row m-form-row--light is-valid">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<p class="m-form-row__validation-message">...</p>
		<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" />
	</div>
</div>

Errored textbox

Please enter a valid email

<div class="m-form-row m-form-row--light is-error">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<p class="m-form-row__error-message">...</p>
		<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" />
	</div>
</div>

Disabled textbox

<div class="m-form-row m-form-row--light is-disabled">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" disabled />
	</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--plus Modifier for adding a plus prefix symbol   .a-textbox  
.a-textbox--pound Modifier for adding a pound prefix symbol   .a-textbox  
.a-textbox--euro Modifier for adding a euro prefix symbol   .a-textbox  
.a-textbox--dollar Modifier for adding a dollar prefix symbol   .a-textbox  
.a-textbox--percent Modifier for adding a percent suffix symbol   .a-textbox  
.a-textbox--pence Modifier for adding a pence suffix symbol   .a-textbox  
.a-textbox--1-character Modifier for restricting the textbox length for 1 character   .a-textbox maxlength must be set to 1
.a-textbox--2-character Modifier for restricting the textbox length for 2 characters   .a-textbox maxlength must be set to 2
.a-textbox--3-character Modifier for restricting the textbox length for 3 characters   .a-textbox maxlength must be set to 3
.a-textbox--4-character Modifier for restricting the textbox length for 4 characters   .a-textbox maxlength must be set to 4
.a-textbox--5-character Modifier for restricting the textbox length for 5 characters   .a-textbox maxlength must be set to 5
.a-textbox--6-character Modifier for restricting the textbox length for 6 characters   .a-textbox maxlength must be set to 6
.a-textbox--7-character Modifier for restricting the textbox length for 7 characters   .a-textbox maxlength must be set to 7
.a-textbox--8-character Modifier for restricting the textbox length for 8 characters   .a-textbox maxlength must be set to 8
.a-textbox--9-character Modifier for restricting the textbox length for 9 characters   .a-textbox maxlength must be set to 9
.a-textbox--10-character Modifier for restricting the textbox length for 10 characters   .a-textbox maxlength must be set to 10
.a-textbox--11-character Modifier for restricting the textbox length for 11 characters   .a-textbox maxlength must be set to 11

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