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

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.

Cool