1. Perceivable · 1.3 Adaptable

1.3.5 — Identify Input Purpose

Level AA

Engineering guidance on this page is adapted from Appt.org (Appt Foundation), used under the CC BY-SA 4.0 license. In keeping with that license, the adapted content on this page is likewise available under CC BY-SA 4.0. "Appt" is a registered trademark of the Appt Foundation; this page is not affiliated with or endorsed by Appt.

Set content type

On Android, you can set a content type by using the android:autofillHints property.

The following values are defined:

creditCardExpirationDate: auto-fillcredit card expiration date
creditCardExpirationDay: credit card expiration day
creditCardExpirationMonth: credit card expiration month
creditCardExpirationYear: credit card expiration year
creditCardNumber: credit card number
creditCardSecurityCode: credit card security code
emailAddress: email address
name: name
password: password
phone: phone number
postalAddress: postal address
postalCode: postal code
username: username

Example of using autofillHints:

xml

<EditText
    android:autofillHints="emailAddress" />

In Jetpack Compose, Autofill can be used to automatically fill TextField with predefined data, such as email, credit card information, etc.

You can set AutoFillType to specify which type of data should be prompted to user. The following values are defined:

AddressAuxiliaryDetails: auxiliary address details
AddressCountry: country name/ code
AddressLocality: address locality (city/town)
AddressRegion: region/ state
AddressStreet: street address
BirthDateDay: birth day(of the month)
BirthDateFull: full birth date
BirthDateMonth: birth month
BirthDateYear: birth year
CreditCardExpirationDate: credit card expiration date
CreditCardExpirationDay: credit card expiration day
CreditCardExpirationMonth: credit card expiration month
CreditCardExpirationYear: credit card expiration year
CreditCardNumber: credit card number
CreditCardSecurityCode: credit card security code
EmailAddress: email address
Gender: gender
NewPassword:newly created password for save/update
NewUsername: newly created username for save/update
Password: password
PersonFirstName: person's first/ given name
PersonFullName: person's full name
PersonLastName: person's last/ family name
PersonMiddleInitial: person's middle initial
PersonMiddleName: person's middle name
PersonNamePrefix: person's name prefix
PersonNameSuffix: person's name suffix
PhoneCountryCode: phone number's country code
PhoneNumber: phone number with country code
PhoneNumberDevice: device's phone number usually for Sign Up / OTP flows
PhoneNumberNational: phone number without country code
PostalAddress: postal address
PostalCode: postal code
PostalCodeExtended: extended ZIP/ POSTAL code
SmsOtpCode: SMS One Time Password (OTP)
Username: username

kotlin

// Create custom composable with AutoFill to later wrap it with TextField
@ExperimentalComposeUiApi
@Composable
private fun Autofill(
    autofillTypes: List<AutofillType>,
    onFill: ((String) -> Unit),
    content: @Composable BoxScope.() -> Unit
) {
    val autofill = LocalAutofill.current
    val autofillTree = LocalAutofillTree.current
    val autofillNode =
        remember(autofillTypes, onFill) {
            AutofillNode(onFill = onFill, autofillTypes = autofillTypes)
        }

    Box(
        modifier =
        Modifier.onFocusChanged {
            if (it.isFocused) {
                autofill?.requestAutofillForNode(autofillNode)
            } else {
                autofill?.cancelAutofillForNode(autofillNode)
            }
        }
            .onGloballyPositioned { autofillNode.boundingBox = it.boundsInWindow() },
        content = content
    )

    DisposableEffect(autofillNode) {
        autofillTree.children[autofillNode.id] = autofillNode
        onDispose { autofillTree.children.remove(autofillNode.id) }
    }
}
// AutoFill composable usage
var name by
rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
Autofill(
    // We can pass here multiple AutofillTypes
    autofillTypes = listOf(AutofillType.PersonFullName, AutofillType.PersonLastName),
    onFill = { name = TextFieldValue(it) }
) {
    OutlinedTextField(
        value = name,
        onValueChange = { name = it },
        label = { Text("Name") },
    )
}

On iOS, you can set a content type by using the textContentType property.

The following values are defined in UITextContentType:

addressCity: entering a city
addressCityAndState: entering a city and state
addressState: entering a state
countryName: entering a country
creditCardNumber: entering a credit card number
dateTime: entering a date, time, or duration
emailAddress: entering an email address
familyName: entering a family name, or last name
flightNumber: entering an airline flight number
fullStreetAddress: entering a street address that fully identifies a location
givenName: entering a first name
jobTitle: entering a job title
location: entering a location
middleName: entering a middle name
name: entering a name
namePrefix: entering a prefix or title
nameSuffix: entering a suffix
newPassword: entering a new password
nickname: entering a nickname
oneTimeCode: entering a one-time code
organizationName: entering an organization name
password: entering a password
postalCode: entering a postal code
shipmentTrackingNumber: entering a parcel tracking number
streetAddressLine1: entering the first line of an address
streetAddressLine2: entering the second line of an address
sublocality: entering a sublocality
telephoneNumber: entering a telephone number
URL: entering a URL
username: entering a username

Example of using textContentType:

swift

emailField.textContentType = .emailAddress

In SwiftUI, you can set a content type by using the textContentType-ufdv) view modifier.

The following values are defined in UITextContentType:

addressCity: entering a city
addressCityAndState: entering a city name with a state name
addressState: entering a state name
birthdate: entering a date of birth
birthdateDay: entering the day component of a birthdate
birthdateMonth: entering the month component of a birthdate
birthdateYear: entering the year component of a birthdate
cellularEID: entering an embedded identity document number for an eSIM
cellularIMEI: entering an international mobile equipment identity number for an eSIM
countryName: entering a country or region name
creditCardExpiration: entering an expiration date on a credit card
creditCardExpirationMonth: entering the month component of an expiration date on a credit card
creditCardExpirationYear: entering the year component of an expiration date on a credit card
creditCardFamilyName: entering a family name, or last name, on a credit card
creditCardGivenName: entering a first name on a credit card
creditCardMiddleName: entering a middle name on a credit card
creditCardName: entering a name on a credit card
creditCardNumber: entering a credit card number
creditCardSecurityCode: entering a credit card security code
creditCardType: entering a credit card type
dateTime: entering a date, time, or duration
emailAddress: entering an email address
familyName: entering a family name, or last name
flightNumber: entering an airline flight number
fullStreetAddress: entering a street address that fully identifies a location
givenName: entering a first name
jobTitle: entering a job title
location: entering a location, such as a point of interest, an address, or another identifier for a location
middleName: entering a middle name
name: entering a name
namePrefix: entering a prefix or title, such as Dr.
nameSuffix: entering a suffix, such as Jr.
newPassword: entering a new password
nickname: entering a nickname
oneTimeCode: entering a one-time code
organizationName: entering an organization name
password: entering a password
postalCode: entering a postal code
shipmentTrackingNumber: entering a parcel tracking number
streetAddressLine1: entering the first line of a street address
streetAddressLine2: entering the second line of a street address
sublocality: entering a sublocality
telephoneNumber: entering a telephone number
URL: entering a URL
username: entering an account or login name

Example of using textContentType:

swift

@State var emailAddress: String = ""

var body: some View {
    TextField("Email", text: $emailAddress)
        .textContentType(.emailAddress)
}

In Flutter, you can set a content type by using the autoFillHints property.

It's important to note that constants are platform dependent and don't work the same everywhere, or even at all.

The following constants are defined:

addressCity: The input field expects an address locality (city/town).
addressCityAndState: The input field expects a city name combined with a state name.
addressState: The input field expects a region/state.
birthday: The input field expects a person's full birth date.
birthdayDay: The input field expects a person's birth day(of the month).
birthdayMonth: The input field expects a person's birth month.
birthdayYear: The input field expects a person's birth year.
countryCode: The input field expects an ISO 3166-1-alpha-2 country code.
countryName: The input field expects a country name.
creditCardExpirationDate: The input field expects a credit card expiration date.
creditCardExpirationDay: The input field expects a credit card expiration day.
creditCardExpirationMonth: The input field expects a credit card expiration month.
creditCardExpirationYear: The input field expects a credit card expiration year.
creditCardFamilyName: The input field expects the holder's last/family name as given on a credit card.
creditCardGivenName: The input field expects the holder's first/given name as given on a credit card.
creditCardMiddleName: The input field expects the holder's middle name as given on a credit card.
creditCardName: The input field expects the holder's full name as given on a credit card.
creditCardNumber: The input field expects a credit card number.
creditCardSecurityCode: The input field expects a credit card security code.
creditCardType: The input field expects the type of a credit card, for example "Visa".
email: The input field expects an email address.
familyName: The input field expects a person's last/family name.
fullStreetAddress: The input field expects a street address that fully identifies a location.
gender: The input field expects a gender.
givenName: The input field expects a person's first/given name.
impp: The input field expects a URL representing an instant messaging protocol endpoint.
jobTitle: The input field expects a job title.
language: The input field expects the preferred language of the user.
location: The input field expects a location, such as a point of interest, an address,or another way to identify a location.
middleInitial: The input field expects a person's middle initial.
middleName: The input field expects a person's middle name.
name: The input field expects a person's full name.
namePrefix: The input field expects a person's name prefix or title, such as "Dr.".
nameSuffix: The input field expects a person's name suffix, such as "Jr.".
newPassword: The input field expects a newly created password for save/update.
newUsername: The input field expects a newly created username for save/update.
nickname: The input field expects a nickname.
oneTimeCode: The input field expects a SMS one-time code.
organizationName: The input field expects an organization name corresponding to the person, address, or contact information in the other fields associated with this field.
password: The input field expects a password.
photo: The input field expects a photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field.
postalAddress: The input field expects a postal address.
postalAddressExtended: The input field expects an auxiliary address details.
postalAddressExtendedPostalCode: The input field expects an extended ZIP/POSTAL code.
postalCode: The input field expects a postal code.
streetAddressLevel1: The first administrative level in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.
streetAddressLevel2: The second administrative level, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.
streetAddressLevel3: The third administrative level, in addresses with at least three administrative levels.
streetAddressLevel4: The finest-grained administrative level, in addresses which have four levels.
streetAddressLine1: The input field expects the first line of a street address.
streetAddressLine2: The input field expects the second line of a street address.
streetAddressLine3: The input field expects the third line of a street address.
sublocality: The input field expects a sublocality.
telephoneNumber: The input field expects a telephone number.
telephoneNumberAreaCode: The input field expects a phone number's area code, with a country -internal prefix applied if applicable.
telephoneNumberCountryCode: The input field expects a phone number's country code.
telephoneNumberDevice: The input field expects the current device's phone number, usually for Sign Up / OTP flows.
telephoneNumberExtension: The input field expects a phone number's internal extension code.
telephoneNumberLocal: The input field expects a phone number without the country code and area code components.
telephoneNumberLocalPrefix: The input field expects the first part of the component of the telephone number that follows the area code, when that component is split into two components.
telephoneNumberLocalSuffix: The input field expects the second part of the component of the telephone number that follows the area code, when that component is split into two components.
telephoneNumberNational: The input field expects a phone number without country code.
transactionAmount: The amount that the user would like for the transaction (e.g. when entering a bid or sale price).
transactionCurrency: The currency that the user would prefer the transaction to use, in ISO 4217 currency code.
url: The input field expects a URL.
username: The input field expects a username or an account name.

dart

TextFormField(
    autofillHints: [AutofillHints.email]
)

In React Native,there are different properties for Android and iOS to set the content type. For Android, you can use the autoComplete property. For iOS, you can use the textContentType property.

Available values for autoComplete on Android:

birthdate-day
birthdate-full
birthdate-month
birthdate-year
cc-csc
cc-exp
cc-exp-day
cc-exp-month
cc-exp-year
cc-number
email
gender
name
name-family
name-given
name-middle
name-middle-initial
name-prefix
name-suffix
password
password-new
postal-address
postal-address-country
postal-address-extended
postal-address-extended-postal-code
postal-address-locality
postal-address-region
postal-code
street-address
sms-otp
tel
tel-country-code
tel-national
tel-device
username
username-new
off

Available values for textContentType on iOS:

none
URL
addressCity
addressCityAndState
addressState
countryName
creditCardNumber
emailAddress
familyName
fullStreetAddress
givenName
jobTitle
location
middleName
name
namePrefix
nameSuffix
nickname
organizationName
postalCode
streetAddressLine1
streetAddressLine2
sublocality
telephoneNumber
username
password
newPassword
oneTimeCode

jsx

<TextInput
    autoComplete='email'
    textContentType='emailAddress'
/>

In MAUI, there is no built-in way to create a custom action, but you can achieve this via Platform Behavior. See the code for an example of usage.

PlatformBehavior

csharp

public class InputContentTypeBehavior
#if IOS
    : PlatformBehavior<Entry, UIKit.UITextField>
#elif ANDROID
    : PlatformBehavior<Entry, Android.Widget.EditText>
#endif
{
    public static readonly BindableProperty FieldTypeAndroidProperty = 
        BindableProperty.Create(
            nameof(FieldTypeAndroid), 
            typeof(FieldTypeAndroid), 
            typeof(AccessibilityCustomActionBehavior), 
            FieldTypeAndroid.None
        );

    public FieldTypeAndroid FieldTypeAndroid
    {
        get => (FieldTypeAndroid)GetValue(FieldTypeAndroidProperty);
        set => SetValue(FieldTypeAndroidProperty, value);
    }

    public static readonly BindableProperty FieldTypeiOSProperty =
        BindableProperty.Create(
            nameof(FieldTypeiOS), 
            typeof(FieldTypeiOS), 
            typeof(AccessibilityCustomActionBehavior), 
            FieldTypeiOS.None
        );

    public FieldTypeiOS FieldTypeiOS
    {
        get => (FieldTypeiOS)GetValue(FieldTypeiOSProperty);
        set => SetValue(FieldTypeiOSProperty, value);
    }

#if ANDROID

    protected override void OnAttachedTo(Entry bindable, Android.Widget.EditText platformView)
    {
        base.OnAttachedTo(bindable, platformView);

        if (FieldTypeAndroid != FieldTypeAndroid.None)
        {
            platformView.SetAutofillHints(
                FirstCharToLowerCase(FieldTypeAndroid.ToString())
            );
        }
    }

    private string? FirstCharToLowerCase(string? str)
    {
        if (!string.IsNullOrEmpty(str) && char.IsUpper(str[0]))
            return str.Length == 1 ? char.ToLower(str[0]).ToString() : char.ToLower(str[0]) + str[1..];

        return str;
    }

#elif IOS

    protected override void OnAttachedTo(Entry bindable, UIKit.UITextField platformView)
    {
        base.OnAttachedTo(bindable, platformView);

        var textType = GetiOSFieldType(FieldTypeiOS);

        platformView.TextContentType = textType;
    }

    private Foundation.NSString GetiOSFieldType(FieldTypeiOS fieldType)
    {
        try
        {
            var propertyInfo = typeof(UIKit.UITextContentType)
                .GetProperty(
                    fieldType.ToString(), 
                    System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
                );

            return (Foundation.NSString)propertyInfo.GetValue(null, null);
        }
        catch { }

        return Foundation.NSString.Empty;
    }

#endif
}

public enum FieldTypeAndroid
{
    None,
    CreditCardExpirationDate,
    CreditCardExpirationDay,
    CreditCardExpirationMonth,
    CreditCardExpirationYear,
    CreditCardNumber,
    CreditCardSecurityCode,
    EmailAddress,
    Name,
    Password,
    Phone,
    PostalAddress,
    PostalCode,
    Username
}

public enum FieldTypeiOS
{
    None,
    AddressCity,
    AddressCityAndState,
    AddressState,
    CountryName,
    CreditCardNumber,
    EmailAddress,
    FullStreetAddress,
    GivenName,
    JobTitle,
    Location,
    MiddleName,
    Name,
    NamePrefix,
    NameSuffix,
    NewPassword,
    Nickname,
    OneTimeCode,
    OrganizationName,
    Password,
    PostalCode,
    StreetAddressLine1,
    StreetAddressLine2,
    Sublocality,
    TelephoneNumber,
    Url,
    Username
}

xml

<Entry>
    <Entry.Behaviors>
        <local:InputContentTypeBehavior FieldTypeAndroid="EmailAddress" FieldTypeiOS="NewPassword" />
    </Entry.Behaviors>
</Entry>

csharp

var entry = new Entry();
entry.Behaviors.Add(new InputContentTypeBehavior
{
    FieldTypeAndroid = FieldTypeAndroid.CreditCardExpirationDate,
    FieldTypeiOS = FieldTypeiOS.AddressCity
});

Xamarin.Forms does not support content types for input fields. You can create your own autofill effect. Unfortunately, the pull request for adding it to XamarinCommunitToolkit has been closed.

csharp

Not available, contribute!

Set keyboard type

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:

xml

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

In Jetpack Compose, you can set a keyboard type by using the KeyboardType class in keyboardOptions property of TextField).

The following constants are defined for KeyboardType:

Ascii): for entering ASCII characters
Decimal): for entering decimals
Email): for entering email addresses
Number): for entering digits
NumberPassword): for entering number password
Password): for entering password
Phone): for entering phone numbers
Text): for entering regular text
Unspecified): default keyboard type
Uri): for entering URIs

Example of using KeyboardType:

kotlin

TextField(
    value = "",
    onValueChange = { /* State update logic */ },
    keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number)
)

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:

swift

usernameField.keyboardType = .numberPad

In SwiftUI, you can set a keyboard type by using the keyboardType) view modifier.

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:

swift

@State private var phoneNumber: String = ""

var body: some View {
    TextField("Phone Number", text: $phoneNumber)
        // Set keyboard type
        .keyboardType(.numberPad)
}

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:

dart

TextField( 
  keyboardType: TextInputType.emailAddress,
)

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

jsx

<TextInput keyboardType="email-address" />

In MAUI, there is a built-in property for input fields(Entry & Editor) named Keyboard with the next possible values:

Chat
Default
Email
Numeric
Plain
Telephone
Text
Url

Usage (C#)

csharp

entry.Text = "This is an error message";
entry.Keyboard = Keyboard.Numeric;

xml

<Editor Keyboard="Telephone" />

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 /

xml

<Editor Keyboard="Email" />

← Back to Engineering Support

1.3.5 — Identify Input Purpose

Set content type

Android

Jetpack Compose

iOS

SwiftUI

Flutter

React Native

.NET MAUI

Xamarin

Set keyboard type

Android

Jetpack Compose

iOS

SwiftUI

Flutter

React Native

.NET MAUI

Xamarin