I’m trying to achieve a floating label effect with BasicTextField2 in Jetpack Compose. My goal is to have a placeholder that:

Is initially displayed inside the text field when empty.
Transitions to a smaller label above the text field when the user starts typing.
This should mimic the behavior of the standard TextField component with a label.

Here’s my current BasicTextField2 code:

@Composable
fun MyTextField() {
    var text by remember { mutableStateOf("") }

    BasicTextField2(
        value = text,
        onValueChange = { text = it }
    ) 
}

How can I implement this floating placeholder/label effect within BasicTextField2?

Expected Output

• Without focus Input field

  

• With focus Input field