How to change border color of textfield in jetpack compose?

Question

I am trying to give a border color for textfield in jetpack compose but I couldn't find information about textfield border color or layout color I just found about How to change layout or border color of outlinedtextfield. Is there a solution like in outlinetextfield? at the textfield?

I want to do like this but for textfield

How to change the outline color of OutlinedTextField from jetpack compose?

hear is my textfield code:

TextField(
                value = currentWeight,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(5.dp),
                onValueChange = { currentWeight = it },
                label = { Text(text = "Mevcut kilon (kg)") },
                shape = RoundedCornerShape(5.dp),
                colors = TextFieldDefaults.textFieldColors(
                    textColor = Grey2,
                    disabledTextColor = Color.Transparent,
                    backgroundColor = Grey3,
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    disabledIndicatorColor = Color.Transparent,
                )
            )

result:

I added focused label color in textfield colors part but it didn't work

EDIT I did it like this @Gabriele Mariotti but there are some problems

val interactionSource = remember { MutableInteractionSource() }
            val isFocused = interactionSource.collectIsFocusedAsState()
            val shape = RoundedCornerShape(2.dp)
            val borderModifier = if (isFocused.value) Modifier.border(1.dp,Red, shape) else Modifier
            val singleLine = true
            val enabled = true
            BasicTextField(
                value = currentWeight,
                onValueChange = { currentWeight = it },
                interactionSource = interactionSource,
                enabled = enabled,
                singleLine = singleLine,
                modifier =  borderModifier.background(
                    color = TextFieldDefaults.textFieldColors().backgroundColor(true).value,
                    shape = shape
                )
            ) {
                TextFieldDefaults.TextFieldDecorationBox(
                    value = currentWeight,
                    innerTextField = it,
                    singleLine = singleLine,
                    enabled = enabled,
                    label = { Text("Label") },
                    placeholder = { Text("Placeholder") },
                    visualTransformation = VisualTransformation.None,
                    interactionSource = interactionSource,
                    colors = TextFieldDefaults.textFieldColors()
                )
            }

ISSUES

TextFieldDefaults.TextFieldDecorationBox
And `Text()` 

TextFieldDecorationBox is red color and error is Unresolved reference: TextFieldDecorationBox

---

 label = { Text("Label") },
 placeholder = { Text("Placeholder") },

Texts error

@Composable invocations can only happen from the context of a @Composable function

Answer 1

You can make the background transparent and add a border to the modifier to create the line. Here’s an example:

TextField(
        value = "",
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp)
            .border(width = 1.dp, shape = RoundedCornerShape(4.dp), color = Color.Gray),
        onValueChange = { },
        label = {
            Text(text = "Mevcut kilon (kg)")
                },
        shape = RoundedCornerShape(5.dp),
        colors = TextFieldDefaults.textFieldColors(
            textColor = Color.Gray,
            disabledTextColor = Color.Transparent,
            backgroundColor =  Color.Transparent,
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
        ),
    )

Answer 2

You can use BasicTextField applying a border modifier and TextFieldDecorationBox.

Something like:

    val isFocused = interactionSource.collectIsFocusedAsState()
    val shape = RoundedCornerShape(2.dp)
    val borderModifier = if (isFocused.value) Modifier.border(1.dp,Red, shape) else Modifier

    BasicTextField(
        value = value,
        onValueChange = { value = it },
        interactionSource = interactionSource,
        enabled = enabled,
        singleLine = singleLine,
        modifier =  borderModifier.background(
            color = TextFieldDefaults.textFieldColors().backgroundColor(enabled).value,
            shape = shape
        )
    ) {
        TextFieldDefaults.TextFieldDecorationBox(
            value = value,
            innerTextField = it,
            singleLine = singleLine,
            enabled = enabled,
            label = { Text("Label") },
            placeholder = { Text("Placeholder") },
            visualTransformation = VisualTransformation.None,
            interactionSource = interactionSource,
            colors = TextFieldDefaults.textFieldColors()
        )
    }