`TextField` - How can I style the underline colour...

# compose

[Ketan]

TextField - How can I style the underline colour, error text colour? Is there any attribute that I can set and it styles the TextField the way I want?

Card(color = MaterialTheme.colors.onBackground,
                elevation = 16.dp,
                modifier = Modifier.fillMaxWidth()
                    .height(160.dp)
            ) {
                Column(modifier = Modifier.fillMaxWidth()
                    .padding(horizontal = 32.dp),
                    verticalArrangement = Arrangement.Center,
                    horizontalGravity = Alignment.CenterHorizontally
                ) {
                    TextField(value = TextFieldValue("User"),
                        modifier = Modifier.preferredHeight(48.dp),
                        cursorColor = MaterialTheme.colors.background,
                        textColor = MaterialTheme.colors.background,
                        onValueChange = {})
                    Spacer(modifier = Modifier.height(16.dp))
                    TextField(value = TextFieldValue("Password"),
                        modifier = Modifier.preferredHeight(48.dp),
                        cursorColor = MaterialTheme.colors.background,
                        textColor = MaterialTheme.colors.background,
                        visualTransformation = PasswordVisualTransformation(),
                        onValueChange = {})
                    
                }
            }
            Spacer(modifier = Modifier.height(16.dp))
            Row(modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.End,
                verticalGravity = Alignment.CenterVertically
            ) {
                OutlinedButton(onClick = {},
                    elevation = 16.dp,
                    border = Border(2.dp, color = MaterialTheme.colors.onBackground)
                ) {
                    Text(text = "Reset", color = MaterialTheme.colors.onBackground)
                }
                Spacer(modifier = Modifier.width(16.dp))
                Button(onClick = {},
                    elevation = 16.dp,
                    backgroundColor = MaterialTheme.colors.onBackground,
                ) {
                    Text(text = "Login")
                }
            }

The above code produces

[satyan]

I think the barebone TextField is on purpose.

If you need to style it just use other composable/modifier to underline it, box it etc.

For some sample you can see Jetchat with creates it's own TextField. It's covered in one of the three Compose video by Google.

[satyan]

https://youtu.be/SMOhl9RK0BA▾

[Ketan]

Cool