Search code examples
androidandroid-jetpack-composetextfieldhint

How to hide hint label on the OutlinedTextField border


How can I hide or disable hint label after text input?

OutlinedTextField(
            value = value,
            modifier = Modifier.fillMaxSize(),
            shape = RoundedCornerShape(8.dp),
            textStyle = TextStyle(fontSize = nFontSize),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                textColor = Color.Black,
                focusedBorderColor = colorResource(id = R.color.inbox_company_red),
                cursorColor = Color.Black),
            //visualTransformation = VisualTransformation.None,
            label = {Text(text = if (value.isEmpty()) stringResource(id = R.string.name" else "")}

enter image description here


Solution

  • You can hide using remember function as this :

        var value by remember { mutableStateOf("") 
    

    Then update your @Composable as this :

    OutlinedTextField(
            value = value,
            onValueChange = {
                value = it
            },
            modifier = Modifier.fillMaxSize(),
            shape = RoundedCornerShape(8.dp),
            textStyle = TextStyle(fontSize = 16.sp),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                textColor = Color.Black,
                focusedBorderColor = Color.Red, // Change this to your desired color
                cursorColor = Color.Black
            ),
            label = {
                Text(text = if (value.isEmpty()) "Hint" else "")
            }
        )
    

    Result is

    enter image description here

    enter image description here

    Edit

    If you want to hide the label when gaining focus your @Composable you can use the Modifier.onFocusChange see the edited code

        var value by remember { mutableStateOf("") }
        var isFocused by remember { mutableStateOf(false) }
        var isLabelVisible by remember { mutableStateOf(true) }
    
        OutlinedTextField(
            value = value,
            onValueChange = {
                value = it
            },
            modifier = Modifier
                .size(width = 200.dp, height = 100.dp)
                .onFocusChanged { focusState ->
                    isFocused = focusState.isFocused
                    if (focusState.isFocused) {
                        isLabelVisible = false
                    } else if (value.isEmpty()) {
                        isLabelVisible = true
                    }
                },
            shape = RoundedCornerShape(8.dp),
            textStyle = TextStyle(fontSize = 16.sp),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                textColor = Color.Black,
                focusedBorderColor = Color.Red, 
                cursorColor = Color.Black
            ),
            label = {
                if (isLabelVisible) {
                    Text(text = "Hint")
                }
            }
        )