Usage
Text inputs allow people to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted by the form creator).
Text input fields may be either single or multiple lined depending on the expected length of the user response.
Use a text input when:
- Users' answers are likely to vary and it is too constraining to account for users' answers using other input devices.
- Users are likely to want to paste information into the field.
Best practice
- The length of the text input provides a hint to users as to how much text to write. However, this needs to be balanced with the form design as inconsistent input lengths may appear confusing.
- Do not force users to write paragraphs of text into a single-line input box - use a multiple lines text input instead.
- Text inputs are more difficult for mobile users.
- Avoid relying on placeholder text that appears within a text field before a user starts typing instead of using a label heading. When the placeholder text disappears after a user clicks into the field, users will no longer be able to remind themselves of the topic of entry field to check they have answered it appropriately.
- Do not align text fields of different purposes together on the same horizontal line, e.g. Credit card input with email address input.
Accessibility
Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three. Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful.
Definition
Text entry fields have different states pending on the stage of user interaction with it. However, at every state the label colour remains $charcoal--120. The default or static state, the placeholder text is in #black--80 with a field border colour of $black--40. In the active state where the user have clicked into the field (mousefocus), both the font colour and border colour are $charcoal--120. Once the user has taken the mouse focus from the entry field the border colour becomes $black--40 whilst the entered text remains $charcoal--120.
For tooltips use the Bootstrap 'info-alert' style and for error messages used the Bootstrap 'alert-danger' style along with highlighting the incorrect field border with a $red--100 border. In the disabled state, the input field background is #black--40 and the text #black--80.
Code samples
Desktop
- Labels: Avenir Medium, Arial, sans-serif; bold; 1.5em; $charcoal--120.
- Static / default field: Avenir Roman, Arial, sans-serif; normal; 1.4em; $black--80; border: 1px $black--40.
- De-focused field: Avenir Roman, Arial, sans-serif; normal; 1.4em; $charcoal--120; border: 1px $black--40.
- Active field: Avenir Roman, Arial, sans-serif; normal; 1.4em; $charcoal--120; border: 1px $charcoal--120.
- Disabled field: Avenir Roman, Arial, sans-serif; normal; 1.4em; $charcoal--120; border: 1px $charcoal--120; background: $black--40.
HTML5 input types
Most browsers and mobile devices take advantage of HTML 5 input types to make it easier for the user and also do some basic formatting valaidation.
- email - checks for '@', '.' and no space. There may be probems with International character checks, however.
- url - checks for a valid formated url.
- tel - allows numbers and '+'. Mobile devices offer the numeric keypad.
- number - this is inconsistently 'enhanced' by browsers at the moment.
- dates and time
- month
- week
- time
More on HTML 5 input types
HTML5 input attributes
See HTML5 attributes
