Text fields allow users to enter text into a UI.
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)
}
}
},
)
}