Hi! How can I create TextFild like that? I try: ```TextField( value = titleState.value, onVa...

# compose

[Ink]

Hi! How can I create TextFild like that?
I try:

TextField(
    value = titleState.value,
    onValueChange = { titleState.value = it },
    colors = TextFieldDefaults.textFieldColors(
        textColor = MaterialTheme.colors.primary,
        disabledTextColor = Color.Transparent,
        backgroundColor = Color.Transparent,
        focusedIndicatorColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent,
        disabledIndicatorColor = Color.Transparent
    )
)

The problem is when I want to put down text there is a text instead of hint and I have to delete text before typing the proper word

[Landry Norris]

There should be a param called "label", at least there is in OutlinedTextField. Pass in

{ Text("Searching for...") }

[Landry Norris]

One thing to note is that it looks like the label is an actual composable, which allows you to theoretically put anything inside if you wanted to.

[Ink]

Is it possible to remove that top hint?
So you're saying it's better to use Label instead of TextField?

[Zach Klippenstein (he/him) [MOD]]

Does the placeholder slot do what you want? I thought that was for hint

[Ink]

When I'm starting typing I want to remove "Searching for..." label

[Landry Norris]

placeholder might be better for this situation.

[Tin Tran]

Placeholder only shows if the textfield is focused if I remember correctly

[Zach Klippenstein (he/him) [MOD]]

I guess you could always just set the label to empty if the field is focused or has text. I think that would be janky on at least one of the transition animations though.

[Landry Norris]

Could the text be changed to "Search", or something, so it makes sense at the top?

[muthuraj]

I just did a UI like this today and I did by using a Box with the label text below and the actual TextField above. I show the label text only if the TextField's value is not empty.

[Ink]

@muthuraj I would be grateful If you can share the code

[muthuraj]

@Composable
private fun SearchBox(
    value: String,
    onValueChange: (String) -> Unit
) {
    Box(
        modifier = Modifier
            .padding(16.dp)
            .background(
                shape = RoundedCornerShape(corner = CornerSize(4.dp)),
                color = Color(0xFFF1F0F1)
            )
    ) {
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
            Row(modifier = Modifier.padding(12.dp)) {
                Icon(
                    modifier = Modifier
                        .height(20.dp)
                        .align(Alignment.CenterVertically),
                    painter = rememberVectorPainter(image = Icons.Outlined.Search),
                    contentDescription = null
                )
                Box(
                    modifier = Modifier
                        .align(Alignment.CenterVertically)
                        .padding(horizontal = 10.dp)
                        .weight(1f)
                ) {
                    if (value.isEmpty()) {
                        Text(
                            text = "Search",
                            style = MaterialTheme.typography.subtitle1
                        )
                    }
                    BasicTextField(
                        modifier = Modifier
                            .fillMaxWidth(),
                        value = value,
                        onValueChange = onValueChange,
                        singleLine = true,
                        textStyle = MaterialTheme.typography.subtitle1
                    )
                }
                if (value.isNotBlank()) {
                    Icon(
                        modifier = Modifier
                            .height(20.dp)
                            .align(Alignment.CenterVertically)
                            .clickable { onValueChange("") },
                        painter = rememberVectorPainter(image = Icons.Outlined.Close),
                        contentDescription = null
                    )
                }
            }
        }
    }
}