How to change the outline color of OutlinedTextField from jetpack compose?

Here is how OutlinedTextField code looks like in jetpack-compose:

    value = "",
    onValueChange = {},
    label = {Text("Input")}

The default color of the outline of this TextField is purple. I want to change the outline color along with the label obviously.


  • The default values used by the OutlinedTextField are defined in the TextFieldDefaults.outlinedTextFieldColors by the focusedBorderColor, unfocusedBorderColor, disabledBorderColor.

    With M2:

    focusedBorderColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
    unfocusedBorderColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),

    You can change the colors.primary and the colors.onSurface in your theme.

    With M3:

        focusedBorderColor: Color = OutlinedTextFieldTokens.FocusOutlineColor.toColor(),
        unfocusedBorderColor: Color = OutlinedTextFieldTokens.OutlineColor.toColor(),

    In this case you can change the primary and the outline colors in your theme.

    Otherwise you can override them using something like:

            value = "",
            onValueChange = {},
            label = {Text("Input")},
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Green,
                unfocusedBorderColor = Yellow)

    enter image description here