---
title: "TextFieldDecorator"
description: "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."
type: "interface"
---

<div class='type'>Interface</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>



```kotlin
fun interface 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.


## Functions

```kotlin
@Composable
    fun 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. You must not call `innerTextField` more than once.



## Code Examples

### BasicTextFieldDecoratorSample
```kotlin
@Composable
fun BasicTextFieldDecoratorSample() {
    // 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()
            }
        },
    )
}
```