SecureTextField

Functions summary

Unit

@Composable
SecureTextField(
    state: TextFieldState,
    modifier: Modifier,
    enabled: Boolean,
    textStyle: TextStyle,
    label: (@Composable () -> Unit)?,
    placeholder: (@Composable () -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    isError: Boolean,
    inputTransformation: InputTransformation?,
    textObfuscationMode: TextObfuscationMode,
    textObfuscationCharacter: Char,
    keyboardOptions: KeyboardOptions,
    onKeyboardAction: KeyboardActionHandler?,
    shape: Shape,
    colors: TextFieldColors,
    interactionSource: MutableInteractionSource?
)

Material Design filled text field for secure content

Cmn

Functions

SecureTextField

Cmn

Artifact: androidx.compose.material:material

View Source

Added in 1.10.0

@Composable
fun SecureTextField(
    state: TextFieldState,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    textStyle: TextStyle = LocalTextStyle.current,
    label: (@Composable () -> Unit)? = null,
    placeholder: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    isError: Boolean = false,
    inputTransformation: InputTransformation? = null,
    textObfuscationMode: TextObfuscationMode = TextObfuscationMode.System,
    textObfuscationCharacter: Char = DefaultObfuscationCharacter,
    keyboardOptions: KeyboardOptions = SecureTextFieldKeyboardOptions,
    onKeyboardAction: KeyboardActionHandler? = null,
    shape: Shape = TextFieldDefaults.TextFieldShape,
    colors: TextFieldColors = TextFieldDefaults.textFieldColors(),
    interactionSource: MutableInteractionSource? = null
): Unit

Material Design filled text field for secure content

Text fields allow users to enter text into a UI. SecureTextField is specifically designed for password entry fields. It only supports a single line of content and comes with default settings that are appropriate for entering secure content. Additionally, some context menu actions like cut, copy, and drag are disabled for added security.

Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components. For an outlined version, see OutlinedSecureTextField.

Example of a password text field:

import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.input.TextObfuscationMode
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.SecureTextField
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.material.icons.Icons
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.text.input.KeyboardType

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.System else TextObfuscationMode.Visible,
    trailingIcon = {
        IconButton(onClick = { passwordHidden = !passwordHidden }) {
            val visibilityIcon =
                if (passwordHidden) Icons.Filled.Visibility else Icons.Filled.VisibilityOff
            // Provide localized description for accessibility services
            val description = if (passwordHidden) "Show password" else "Hide password"
            Icon(imageVector = visibilityIcon, contentDescription = description)
        }
    },
)

Parameters
`state: TextFieldState`	`TextFieldState` object that holds the internal editing state of this text field.
`modifier: Modifier = Modifier`	a `Modifier` for this text field.
`enabled: Boolean = true`	controls the enabled state of the `TextField`. When `false`, the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state.
`textStyle: TextStyle = LocalTextStyle.current`	the style to be applied to the input text. The default `textStyle` uses the `LocalTextStyle` defined by the theme.
`label: (@Composable () -> Unit)? = null`	the optional label to be displayed inside the text field container. The default text style for internal `Text` is `Typography.caption` when the text field is in focus and `Typography.subtitle1` when the text field is not in focus.
`placeholder: (@Composable () -> Unit)? = null`	the optional placeholder to be displayed when the text field is in focus and the input text is empty. The default text style for internal `Text` is `Typography.subtitle1`.
`leadingIcon: (@Composable () -> Unit)? = null`	the optional leading icon to be displayed at the beginning of the text field container.
`trailingIcon: (@Composable () -> Unit)? = null`	the optional trailing icon to be displayed at the end of the text field container.
`isError: Boolean = false`	indicates if the text field's current value is in error. If set to true, the label, bottom indicator and trailing icon by default will be displayed in error color.
`inputTransformation: InputTransformation? = null`	Optional `InputTransformation` that will be used to transform changes to the `TextFieldState` made by the user. The transformation will be applied to changes made by hardware and software keyboard events, pasting or dropping text, accessibility services, and tests. The transformation will not be applied when changing the `state` programmatically, or when the transformation is changed. If the transformation is changed on an existing text field, it will be applied to the next user edit. the transformation will not immediately affect the current `state`.
`textObfuscationMode: TextObfuscationMode = TextObfuscationMode.System`	the method used to obscure the input text.
`textObfuscationCharacter: Char = DefaultObfuscationCharacter`	the character to use while obfuscating the text. It doesn't have an effect when `textObfuscationMode` is set to `TextObfuscationMode.Visible`.
`keyboardOptions: KeyboardOptions = SecureTextFieldKeyboardOptions`	software keyboard options that contains configuration such as `KeyboardType` and `ImeAction`. If using `TextObfuscationMode.Visible`, consider passing `KeyboardType.PasswordVisible` instead to indicate to the IME that the input is visible.
`onKeyboardAction: KeyboardActionHandler? = null`	Called when the user presses the action button in the input method editor (IME), or by pressing the enter key on a hardware keyboard. By default this parameter is null, and would execute the default behavior for a received IME Action e.g., `ImeAction.Done` would close the keyboard, `ImeAction.Next` would switch the focus to the next focusable item on the screen.
`shape: Shape = TextFieldDefaults.TextFieldShape`	the shape of the text field's container
`colors: TextFieldColors = TextFieldDefaults.textFieldColors()`	`TextFieldColors` that will be used to resolve color of the text, content (including label, placeholder, leading and trailing icons, indicator line) and background for this text field in different states. See `TextFieldDefaults.textFieldColors`
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this text field. You can use this to change the text field's appearance or preview the text field in different states. Note that if `null` is provided, interactions will still happen internally.