Search code examples
android-jetpack-composetextfieldandroid-compose-textfield

Jetpack Compose - Show trailingIcon in BasicTextField?


TextField has way too much padding by default for the screen I'm building, so I'm forced to use BasicTextField (see: this post on default TextField padding)

The problem is, BasicTextField doesn't take in a trailingIcon parameter. Is there a way to get around this?


Solution

  • Starting with 1.2.0 you can use the TextFieldDecorationBox with the BasicTextField. Here you can use the trailingIcon and contentPadding attributes:

    BasicTextField(
        value = value,
        onValueChange = onValueChange,        
        interactionSource = interactionSource,
        enabled = enabled,
        singleLine = singleLine
    ) {
        TextFieldDefaults.TextFieldDecorationBox(
            value = value,
            innerTextField = it,
            singleLine = singleLine,
            enabled = enabled,
            visualTransformation = VisualTransformation.None,
            trailingIcon = { /* ... */ },
            interactionSource = interactionSource,
            contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                   //...top = 0.dp, bottom = 0.dp
            )
        )
    }