Jetpack Compose FilledTextField in Material Compose

Material Design implementation of a Filled TextField(https://material.io/components/text-fields/#filled-text-field)

A simple example looks like:

Overloads

FilledTextField

@Deprecated(
    "FilledTextField has been renamed to TextField for better discoverability. Use " +
            "TextField instead", replaceWith = ReplaceWith(
        "TextField(" +
                "value = value," +
                " onValueChange = onValueChange," +
                " label = label," +
                " modifier = modifier, " +
                "textStyle = textStyle," +
                " placeholder = placeholder," +
                " leadingIcon = leadingIcon," +
                " trailingIcon = trailingIcon," +
                " isErrorValue = isErrorValue," +
                " visualTransformation = visualTransformation, keyboardType = keyboardType," +
                " imeAction = imeAction," +
                " onImeActionPerformed = onImeActionPerformed," +
                " onFocusChange = onFocusChange," +
                " onTextInputStarted = onTextInputStarted," +
                " activeColor = activeColor," +
                " inactiveColor = inactiveColor," +
                " errorColor = errorColor," +
                " backgroundColor = backgroundColor," +
                " shape = shape)",
        "androidx.compose.material.TextField"
    )
)
@Composable
fun FilledTextField(
    value: String,
    onValueChange: (String) -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = currentTextStyle(),
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    isErrorValue: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardType: KeyboardType = KeyboardType.Text,
    imeAction: ImeAction = ImeAction.Unspecified,
    onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> },
    onFocusChanged: (Boolean) -> Unit = {},
    onTextInputStarted: (SoftwareKeyboardController) -> Unit = {},
    activeColor: Color = MaterialTheme.colors.primary,
    inactiveColor: Color = MaterialTheme.colors.onSurface,
    errorColor: Color = MaterialTheme.colors.error,
    backgroundColor: Color = MaterialTheme.colors.onSurface,
    shape: Shape =
        MaterialTheme.shapes.small.copy(bottomLeft = ZeroCornerSize, bottomRight = ZeroCornerSize)
)

Parameters

Name	Description
`value`	the input text to be shown in the text field
`onValueChange`	the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback
`label`	the 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
`modifier`	a Modifier for this text field
`textStyle`	the style to be applied to the input text. The default textStyle uses the currentTextStyle defined by the theme
`placeholder`	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`	the optional leading icon to be displayed at the beginning of the text field container
`trailingIcon`	the optional trailing icon to be displayed at the end of the text field container
`isErrorValue`	indicates if the text field's current value is in error. If set to true, the label, bottom indicator and trailing icon will be displayed in errorColor color
`visualTransformation`	transforms the visual representation of the input value. For example, you can use androidx.compose.ui.text.input.PasswordVisualTransformation to create a password text field. By default no visual transformation is applied
`keyboardType`	the keyboard type to be used with the text field. Note that the input type is not guaranteed. For example, an IME may send a non-ASCII character even if you set the keyboard type to KeyboardType.Ascii
`imeAction`	the IME action honored by the IME. The 'enter' key on the soft keyboard input will show a corresponding icon. For example, search icon may be shown if ImeAction.Search is selected. When a user taps on that 'enter' key, the onImeActionPerformed callback is called with the specified ImeAction
`onImeActionPerformed`	is triggered when the input service performs an ImeAction. Note that the emitted IME action may be different from what you specified through the imeAction field. The callback also exposes a SoftwareKeyboardController instance as a parameter that can be used to request to hide the software keyboard
`onFocusChanged`	a callback to be invoked when the text field receives or loses focus If the boolean parameter value is `true`, it means the text field has focus, and vice versa
`onTextInputStarted`	a callback to be invoked when the connection with the platform's text input service (e.g. software keyboard on Android) has been established. Called with the SoftwareKeyboardController instance that can be used to request to show or hide the software keyboard
`activeColor`	the color of the label, bottom indicator and the cursor when the text field is in focus
`inactiveColor`	the color of either the input text or placeholder when the text field is in focus, and the color of the label and bottom indicator when the text field is not in focus
`errorColor`	the alternative color of the label, bottom indicator, cursor and trailing icon used when isErrorValue is set to true
`backgroundColor`	the background color of the text field's container. To the color provided here there will be applied a transparency alpha defined by Material Design specifications
`shape`	the shape of the text field's containe

FilledTextField

@Deprecated(
    "FilledTextField has been renamed to TextField for better discoverability. Use " +
            "TextField instead", replaceWith = ReplaceWith(
        "TextField(" +
                "value = value," +
                " onValueChange = onValueChange," +
                " label = label," +
                " modifier = modifier, " +
                "textStyle = textStyle," +
                " placeholder = placeholder," +
                " leadingIcon = leadingIcon," +
                " trailingIcon = trailingIcon," +
                " isErrorValue = isErrorValue," +
                " visualTransformation = visualTransformation, keyboardType = keyboardType," +
                " imeAction = imeAction," +
                " onImeActionPerformed = onImeActionPerformed," +
                " onFocusChange = onFocusChange," +
                " onTextInputStarted = onTextInputStarted," +
                " activeColor = activeColor," +
                " inactiveColor = inactiveColor," +
                " errorColor = errorColor," +
                " backgroundColor = backgroundColor," +
                " shape = shape)",
        "androidx.compose.material.TextField"
    )
)
@Composable
fun FilledTextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = currentTextStyle(),
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    isErrorValue: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardType: KeyboardType = KeyboardType.Text,
    imeAction: ImeAction = ImeAction.Unspecified,
    onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> },
    onFocusChanged: (Boolean) -> Unit = {},
    onTextInputStarted: (SoftwareKeyboardController) -> Unit = {},
    activeColor: Color = MaterialTheme.colors.primary,
    inactiveColor: Color = MaterialTheme.colors.onSurface,
    errorColor: Color = MaterialTheme.colors.error,
    backgroundColor: Color = MaterialTheme.colors.onSurface,
    shape: Shape =
        MaterialTheme.shapes.small.copy(bottomLeft = ZeroCornerSize, bottomRight = ZeroCornerSize)
)

Parameters

Name	Description
`value`	the input text to be shown in the text field
`onValueChange`	the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback
`label`	the 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
`modifier`	a Modifier for this text field
`textStyle`	the style to be applied to the input text. The default textStyle uses the currentTextStyle defined by the theme
`placeholder`	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`	the optional leading icon to be displayed at the beginning of the text field container
`trailingIcon`	the optional trailing icon to be displayed at the end of the text field container
`isErrorValue`	indicates if the text field's current value is in error. If set to true, the label, bottom indicator and trailing icon will be displayed in errorColor color
`visualTransformation`	transforms the visual representation of the input value. For example, you can use androidx.compose.ui.text.input.PasswordVisualTransformation to create a password text field. By default no visual transformation is applied
`keyboardType`	the keyboard type to be used with the text field. Note that the input type is not guaranteed. For example, an IME may send a non-ASCII character even if you set the keyboard type to KeyboardType.Ascii
`imeAction`	the IME action honored by the IME. The 'enter' key on the soft keyboard input will show a corresponding icon. For example, search icon may be shown if ImeAction.Search is selected. When a user taps on that 'enter' key, the onImeActionPerformed callback is called with the specified ImeAction
`onImeActionPerformed`	is triggered when the input service performs an ImeAction. Note that the emitted IME action may be different from what you specified through the imeAction field. The callback also exposes a SoftwareKeyboardController instance as a parameter that can be used to request to hide the software keyboard
`onFocusChanged`	a callback to be invoked when the text field receives or loses focus If the boolean parameter value is `true`, it means the text field has focus, and vice versa
`onTextInputStarted`	a callback to be invoked when the connection with the platform's text input service (e.g. software keyboard on Android) has been established. Called with the SoftwareKeyboardController instance that can be used to request to show or hide the software keyboard
`activeColor`	the color of the label, bottom indicator and the cursor when the text field is in focus
`inactiveColor`	the color of either the input text or placeholder when the text field is in focus, and the color of the label and bottom indicator when the text field is not in focus
`errorColor`	the alternative color of the label, bottom indicator, cursor and trailing icon used when isErrorValue is set to true
`backgroundColor`	the background color of the text field's container. To the color provided here there will be applied a transparency alpha defined by Material Design specifications
`shape`	the shape of the text field's containe