Compose Unstyled 2.0 is out! Check the official announcement blog ->
Compose Component

SecureTextField

Text fields allow users to enter text into a UI.

SecureTextField social preview

PasswordTextField

@Preview
@Composable
fun PasswordTextField() {
    var passwordHidden by rememberSaveable { mutableStateOf(true) }
    SecureTextField(
        state = rememberTextFieldState(),
        label = { Text("Enter password") },
        keyboardOptions =
            KeyboardOptions(
                autoCorrectEnabled = false,
                keyboardType =
                    if (passwordHidden) KeyboardType.Password else KeyboardType.PasswordVisible,
            ),
        textObfuscationMode =
            if (passwordHidden) TextObfuscationMode.RevealLastTyped
            else TextObfuscationMode.Visible,
        trailingIcon = {
            // Provide localized description for accessibility services
            val description = if (passwordHidden) "Show password" else "Hide password"
            TooltipBox(
                positionProvider =
                    TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
                tooltip = {
                    PlainTooltip(
                        modifier =
                            Modifier.semantics {
                                // TODO(b/496338253): Remove this modifier once bug where tooltip
                                //  text is not announced by a11y screen readers is resolved.
                                liveRegion = LiveRegionMode.Assertive
                                paneTitle = description
                            }
                    ) {
                        Text(description)
                    }
                },
                state = rememberTooltipState(),
            ) {
                IconButton(onClick = { passwordHidden = !passwordHidden }) {
                    val visibilityIcon =
                        if (passwordHidden) Icons.Filled.Visibility else Icons.Filled.VisibilityOff
                    Icon(imageVector = visibilityIcon, contentDescription = description)
                }
            }
        },
    )
}

Last updated: