Input

Overview

Users can enter data by clicking or tabbing into the input. Depending on the input type, the user will be presented with the appropriate keyboard on devices with dynamic keyboards.

Input types and modes

Using the correct input type ensures users receive the appropriate keyboard and validation on their device.

Web

• Email — Looks like a normal text input but has validation parameters. Devices with dynamic keyboards will display the relevant keyboard.
• Number — Although it looks like a text field, this input only allows floating-point numbers and usually provides buttons in the form of native controls to increase and decrease the value. Touch devices with dynamic keyboards usually launch the numeric keyboard.
• URL — Looks like a normal text input but has validation parameters. Devices with dynamic keyboards will display the relevant keyboard.
• Password — A single-line text field whose value is obscured. This input type will alert the user if the site is not secure.
• Telephone — Most touch devices will display a numeric keypad when type="tel" is used, meaning this type is useful whenever a numeric keypad is useful. This input type is not just for telephone numbers.
• Text (default) — Standard single-line text input.

Several other input types are not covered here, but can be applied. If you have a field that captures specific data, it is always best to ensure you use the correct input type.

React Native

React Native provides inputMode to control which keyboard is displayed. This is separate from but works alongside the input type.

Example usage

                                                        
                                                        
                                                            <TextInput
                                                          inputMode="email"
                                                          keyboardType="email-address"
                                                          autoComplete="email"
                                                        />
                                                        
                                                            

Best practice note: Use inputMode in combination with keyboardType and autoComplete for the best user experience. The inputMode attribute provides a hint to the browser about what keyboard to display.