TextField with hint text in jetpack compose

Question

I want to create textfield with hint text in jetpackcompose. Any example how create textfield using jectpack? Thanks

Answer 1

compose_version = '1.0.0-beta07'

Use parameter placeholder to show hint

TextField(value = "", onValueChange = {}, placeholder = { Text("Enter Email") })

Use parameter label to show floating label

TextField(value = "", onValueChange = {}, label = { Text("Enter Email") })

Answer 2

You can use

• the label parameter in the TextField composable to display a floating label
• the placeholder parameter to display a placeholder when the text field is in focus and the input text is empty.

You can also use them together.

Something like:

var text by remember { mutableStateOf("text") }

OutlinedTextField(
        value = text, 
        onValueChange = {
             text = it
        },
        label = { 
           Text("Label") 
        }
)

or

TextField(
    value = text, 
    onValueChange = {
         text = it
    },
    label = { 
         Text("Label") 
    },
    placeholder = { 
         Text("Placeholder") 
    }
)

Answer 3

You can create hintTextField in jetpackCompose like below code:

@Composable
fun HintEditText(hintText: @Composable() () -> Unit) {
    val state = state { "" } // The unary plus is no longer needed. +state{""}
    val inputField = @Composable {
        TextField(
            value = state.value,
            onValueChange = { state.value = it }
        )
    }
    if (state.value.isNotEmpty()) {
        inputField()
    } else {
        Layout(inputField, hintText) { measurable, constraints ->
        val inputfieldPlacable = measurable[inputField].first().measure(constraints)
        val hintTextPlacable = measurable[hintText].first().measure(constraints)
        layout(inputfieldPlacable.width, inputfieldPlacable.height) {
                inputfieldPlacable.place(0.ipx, 0.ipx)
                hintTextPlacable.place(0.ipx, 0.ipx)
        } }
    }
}

Call @Compose function like below:

HintEditText @Composable {
                                Text(
                                    text = "Enter Email",
                                    style = TextStyle(
                                        color = Color.White,
                                        fontSize = 18.sp
                                    )
                                )
                            }