Events

The most important events for string input fields involve keyboard presses and entering texts. These relevant events include input, keyup, keydown, and keypress.

The input event is triggered the moment information is entered into the text field; the event is fired synchronously such that the effects can be detected immediately. The events keyup, keydown, and keypress all have similar functionality since they are all keyboard specific. The events are quite self-explanatory (e.g. keydown is triggered when a key is pressed down, keyup is triggered when a key is let go, etc).

Component in Action (Default Text Field)

The border of string input fields typically glow blue when they are enabled (i.e, when the user clicks on them). Once enabled, the user can easily type whatever they wish into the fields. While the user is typing, the caret remains visible to show the user where exactly they are inserting a key.

Here is an example of what the string input field does:

Alternatively, the user can also highlight the text values inside the string input field. Doing this allows the user to easily and quickly replace all or some of the text they entered or remove them entirely.

Additionally, text boxes typically allow the user to drag texts into and out of them.

If there are multiple string input fields on the page (let's say, a form on a webpage), then hitting the tab key would move the caret to and enable the next available text field on the page.

State Diagram

String input fields await values from the user. They are used such that users can submit information and trigger other events in the interface. When a user is not interacting with the field, this component can only be classified as enabled or disabled.

For enabled string input fields, the text box is awaiting the user to enter text; the field will also be in wait mode when the user is typing or cleared the text field. For a text field to actually show results, it should be accompanied by an event trigger or a submit button. For disabled text fields, the rectangular box can only do nothing.

• String input fields with form submit buttons.
  For submitting text entries, the text field can be inlined with a button (see Button component for more info on buttons).
  Go!


• String inputs with more than one line.
  For inputs that require more than one-line, a larger string input field can be used. In the text box below, pressing the "enter"/"return" would also allow the user to insert more lines of text.


• Password Entries.
  Certain string input fields require the user to type specific text values. These text fields may use a red outline to show that the inputs entered are invalid. The text fields shown below require the user to enter the same text values in both text fields. Another aspect to note in the case below: the text values are hidden from the user. Instead of actual alpha-numeric text values, they can be visually replaced by a symbol (in this case, black dots) in order to hide the password the user enters. Only when the user enters an acceptable argument can the textbox change color into something more inviting (usually a green color for "success" or "acceptable input").

  



• Command Lines.
  While they're the oldest known examples of string input, they remain to be the most flexible and interactive. Command lines can account for a plethora of actions: executing lines of code, performing mathematical computations, and answering existential questions; no other form of string input can match a command line's versatility. However, command lines, due to their flexibility, are also the least intuitive of the types of string input due to the large requirement that they place on the user to learn to how to interface with them. If one is not familiar with the commands that their given command line has at its disposal, the command line is rendered useless.

• Some examples of popular command lines include Bash, Windows Terminal, Google Chrome's Omnibar, and assorted calculators.

  

• Disabled.
  There are also some string input fields that will be disabled unless the user performs a specific action first. For example, a string input field will be disabled if the user has to first select from a variety of choices.
  
  In the string input field below, the cursor will not change into an "I-beam pointer" since the user is not allowed to enter any texts. The field has also been greyed out (instead of white in color) to further show the user that they cannot use the text field. In supported browsers, such as Firefox or Google Chrome, when a cursor hovers above the text field, a "no entry sign" 🚫  will appear below the cursor to make it even clearer that the field is disabled.



• Search fields
  Another form of text input fields. It is commonly observed that search fields use a behavior to "auto-fill" look-ups. The field can anticipate user queries by creating a drop-down list of possible searches. For a look at an OS X-specific search field, see the "Platform-Specific Instances" section.





• Voice recognition
  An up and coming design feature in newer models of systems. Developers, such as Google, have even made it possible to enter texts into textboxes by allowing the user to speak into their devices. Usually, a microphone icon, such as the one shown in the text box below, can be seen inside the text field. Pressing/clicking this button would allow the user the talk directly, instead of type with a keyboard, whatever information they wish (assuming the voice recognition capability is enabled and functions properly).

• A main feature of iOS is that if the user clicks anywhere where text can be inserted, a keyboard will pop up. This increases usability because it clearly defines action options to the user. A button titled "Cancel" also pops up next to the input field, which makes the keyboard disappear when pressed. In this example, the user can search the Settings application for desired keywords or phrases.
  
  

  



• More specifically, a different type of keyboard will pop up upon the user's click depending on what type of input is expected. In this example, a user is creating a new contact and has clicked in a text field that requires a phone number, so a keyboard with numbers has popped up. This even further increases usability because the user now knows that they need to input text and that the text needs to be a series of numbers.
  
  

  

• The login screen on iOS has a very distinctive look. The "keyboard" looks different than all other keyboards within iOS, even though its buttons show only numbers with their respective letter associations. All of the numbers are wrapped in circles and as the user types in their password, smaller circles at the top begin to fill in. The example below shows a half-typed password.
  
  

  



• Multiple keyboards are an option for users who would like to be able to input strings of different languages or use emojis. Keyboards can be added in the Settings application and can be quickly accessed by clicking on the world icon on the bottom left corner of the keyboard. If returning to a letters keyboard from the emoji keyboard, the user clicks the ABC icon on the bottom left corner of the keyboard. In this example, the user switches from the English keyboard, to the Spanish keyboard, to the Emoji keyboard, and then back to the English keyboard.
  
  

  

• An "x" icon button shows up inside the input field on both Mac OS X and iOS after the user starts typing their string. Pressing this button clears the entire string from the input field.
  
  

  

  Clear button on Mac OS X

  
  

  Clear button on iOS

• iMessage is available on both OS X and iOS. It is one of the most commonly used applications on OS X because it allows users to respond immediately to text messages without the need to check their mobile devices. This instance of the string input field even supports emojis to give more freedom for the user's text entries. Additionally, the user can to speak directly into the machine in order to enter their message. This can be done by pressing the microphone button right next to the input field and simply speaking into the phone or computer. A single image is shown because iMessage string input looks exactly the same in OS X and iOS.
  
  

  

• Notes allow OS X and iOS users to write reminders or important information into a virtual notepad. This is an example of a text field that immediately shows the user the potential for creating numerous lines of text. In contrast to the other examples given, the text field is intentionally spacious to signal the user that they can use more than one line of text. The notepad looks like an actual notepad, which subliminally tells the user what this application is intended for.
  
  
  

  

  Previous Next

• Lock Screens provide a layer of security for users by requiring that they provide some sort of string input such as a predetermined password or PIN number before they are allowed access to their machine. The string input boxes are kept simple in scope and size, the text input into the field is obscured, and in cases such as PIN number input, the user is even restricted from inputting characters that would not make sense given the context of the prompt. All of these measures towards making the lock screen both straight-forward and easy to parse increases both user accessibility and efficiency in using the Lock Screen.
  

  




• Start Menu Search Bar uses a text box to allow the user to find files anywhere in the machine. In order to make this text box appear on the screen, the user has to press the "Windows Start" button. Like with all search boxes in Windows 10, the text box displays a magnifying glass to indicate its purpose (i.e. to search). When a user types into this box, the box auto-fills with the most probable search terms in the system. A drop-down list also pops-up showing other possible search items.
  

  

  Note: This text box is extremely similar to the "Spotlight" bar of Mac systems.



• File Explorer uses both a search bar and a file path bar. The file path bar allows the user to access any part of the machine immediately, provided they know the correct file path to get there. Directories (folders) can contain either files, which end the path, or more directories, which continue the file path. The delimiter (separator) for this bar is most often the forward slash (/) symbol. Once the file path has been searched, this bar changes to a breadcrumbs bar for simpler user-interface, obscuring the ability to type in a specific file path away from novice users. Due to the intimidating and often complex layout of file paths, this obscurity increases user learnability and satisfaction.
  

  

• Settings possess a search bar in order to search for specific setting to be changed. Within individual settings tabs there are sections to add text in appropriate fields for various types of configuration. In these, as much control as possible is taken away from the user through restrictive string input fields in order to prevent mistakes due to the importance of these fields in affecting how your computer works in general use.
  

  

  




• Edge Address Bar integrates a search bar functionality into its URL field in order to make interfacing with the internet feel more centralized and uniform. Similar to Google Chrome's Omnibar, this change allows Edge to have one sole interface point for users, reducing errors as well as increasing learnability and efficiency.
  

  




• Terminal Command Line provides a command line interface for a lower level interaction with the user's machine. Various commands can be used in order to navigate through the machine, run programs, delete or create files, and view information. While wide-reaching, terminal requires knowledge of specific commands in order to be used even at its most basic level, making it unapproachable for novice users. Arguably this is a good thing due to the fact that the command line has the most control over the user's machine and unknowing users may disrupt critical processes if they were able to work with the command line without a basic understanding of the processes of a machine.