TextFieldDecorator

Composable interface that allows to add decorations around text field, such as icon, placeholder, helper messages or similar, and automatically increase the hit target area of the text field.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MailOutline
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Demonstrates how to use the decorator API on BasicTextField
val state = rememberTextFieldState("Hello, World!")
BasicTextField(
    state = state,
    decorator = { innerTextField ->
        // Because the decorator is used, the whole Row gets the same behaviour as the internal
        // input field would have otherwise. For example, there is no need to add a
        // `Modifier.clickable` to the Row anymore to bring the text field into focus when user
        // taps on a larger text field area which includes paddings and the icon areas.
        Row(
            Modifier.background(Color.LightGray, RoundedCornerShape(percent = 30))
                .padding(16.dp)
        ) {
            Icon(Icons.Default.MailOutline, contentDescription = "Mail Icon")
            Spacer(Modifier.width(16.dp))
            innerTextField()
        }
    }
)

Summary

Public functions
Unit
@Composable
Decoration(innerTextField: @Composable () -> Unit)

To allow you to control the placement of the inner text field relative to your decorations, the text field implementation will pass in a framework-controlled composable parameter innerTextField to this method.
Cmn

Public functions

Decoration

Cmn
Added in 1.7.0
@Composable
fun Decoration(innerTextField: @Composable () -> Unit): Unit

To allow you to control the placement of the inner text field relative to your decorations, the text field implementation will pass in a framework-controlled composable parameter innerTextField to this method. You must not call innerTextField more than once.