Input content type - Jetpack Compose

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

// 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") },
    )
}

Important: in Jetpack Compose 1.7 Autofill is disabled, due to massive performance impact. As Google developers states, it should be available in Compose 1.8. You can track current feature status by following google issue tracker ticket.