The text box control allows users to add a response over a single line.
-
For use with the following input types:
- 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