Skip to content

Latest commit

 

History

History
153 lines (118 loc) · 8.43 KB

input-keyboard-type.md

File metadata and controls

153 lines (118 loc) · 8.43 KB

Input keyboard type

Setting the keyboard type for input fields helps user entering data. For example, if users need to enter a number, it helps to show a numeric keyboard. If users need to enter an e-mail address, it helps if the at-key (@) is shown. You should always set an appropriate keyboard type.

WCAG

Relates to 1.3.5

Android

On Android, you can set a keyboard type by using the android:inputType property. You can combine values with each other.

The following constants are defined:

  • date: for entering a date
  • datetime: for entering a date and time
  • none: to disable input
  • number: for entering a number
  • numberDecimal: for entering decimal numbers
  • numberPassword: for entering a numeric password
  • numberSigned: for entering a positive or negative number
  • phone: for entering a telephone number
  • text: for entering normal text
  • textAutoComplete: to enable automatic completion
  • textAutoCorrect: to enable automatic correction
  • textCapCharacters: to automatically convert characters to uppercase
  • textCapSentences: to automatically capitalize sentences
  • textCapWords: to automatically capitalize words
  • textEmailAddress: for entering an email address
  • textEmailSubject: for entering the subject of an email
  • textFilter: for entering text to filter with
  • textImeMultiLine: to force entering multiple lines of text
  • textLongMessage: for entering a long message
  • textMultiLine: for entering multiple lines of text
  • textNoSuggestions: to disable suggestions
  • textPassword: for entering a password
  • textPersonName: for entering a name
  • textPhonetic: for entering phonetic text
  • textPostalAddress: for entering a postal address
  • textShortMessage: for entering a short message
  • textUri: for entering a URL
  • textVisiblePassword: for entering a visible password
  • textWebEditText: for entering text in a web form
  • textWebEmailAddress: for entering an email address in a web form
  • textWebPassword: for entering a password in a web form
  • time: for entering a time

Example of using inputType:

<EditText
    android:inputType="text|textMultiLine|textCapSentences" />

iOS

On iOS, you can set a keyboard type by using the keyboardType property.

The following types are defined:

  • asciiCapable: a keyboard that displays standard ASCII characters
  • asciiCapableNumberPad: a number pad that outputs only ASCII digits
  • decimalPad: a keyboard with numbers and a decimal point
  • default: the default keyboard
  • emailAddress: a keyboard for entering email addresses
  • namePhonePad: a keypad for entering a person’s name or phone number
  • numberPad: a numeric keypad for PIN entry
  • numbersAndPunctuation: a keyboard for numbers and punctuation
  • phonePad: a keypad for entering telephone numbers
  • URL: a keyboard for URL entry
  • twitter: a keyboard for Twitter text entry, with easy access to the at '@' and hash '#' characters
  • webSearch: a keyboard for web search terms and URL entry

Example of using keyboardType:

usernameField.keyboardType = .numberPad

Flutter

In Flutter, you can set a keyboard type by using the keyboardType property.

The following values are defined in TextInputType:

  • datetime: Keyboard optimized for entering date and time, iOS displays default keyboard.
  • emailAddress: Keyboard optimized for entering e-mail addresses.
  • multiline: Optimized for multiline text input, by having an enter key.
  • name: Keyboard optimized for inputting a person's name
  • none: Prevents the OS from displaying a keyboard.
  • number: Optimized for unsigned numerical input.
  • phone: Number keyboard with '*' and '#'.
  • streetAddress: Optimized for entering addresses, iOS displays default keyboard.
  • text: Optimized for text input.
  • url: Optimized keyboard for entering URLs with '/' and '.'.
  • visiblePassword: Keyboard with letters and numbers.

Example of using keyboardType:

TextField( 
  keyboardType: TextInputType.emailAddress,
)

React Native

In React Native, you can set a keyboard type by using the keyboardType property.

The following values work across platforms:

  • default
  • number-pad
  • decimal-pad
  • numeric
  • email-address
  • phone-pad
  • url

The following values work on iOS only:

  • ascii-capable
  • numbers-and-punctuation
  • name-phone-pad
  • twitter
  • web-search

The following values work on Android only:

  • visible-password
<TextInput keyboardType="email-address" />

Xamarin

In Xamarin.Forms, you can set a keyboard type by using the Keyboard property.

The following Keyboard properties are defined:

  • Chat: keyboard for chatting, includes emoji
  • Default: default keyboard
  • Email: keyboard for entering an e-mail, includes @
  • Numeric: keyboard for entering numbers, includes , and .
  • Plain: keyboard for entering plain text
  • Telephone: keyboard for entering phone numbers, includes plus and hash
  • Text: keyboard for entering text, includes enter
  • Url: keyboard for entering url's, includes /
<Editor Keyboard="Email" />