I’m using the Material 3 TimeInput composable in Jetpack Compose.

TimeInput(state = state, colors = TimePickerDefaults.colors( selectorColor = OrlenTheme.colors.backgroundComponentSecondary, containerColor = OrlenTheme.colors.backgroundComponentPrimary, timeSelectorSelectedContainerColor = OrlenTheme.colors.backgroundComponentSecondary, timeSelectorUnselectedContainerColor = OrlenTheme.colors.backgroundComponentSecondary, timeSelectorSelectedContentColor = OrlenTheme.colors.backgroundBasePrimary, timeSelectorUnselectedContentColor = OrlenTheme.colors.contentBasePrimary)).

I can customize many aspects of the component, but I cannot find any way to change the border or indicator color of the text field when it is focused or selected. Looking into the source code it seems that TimeInput internally uses a TextField, but the indicator colors are not exposed via TimePickerDefaults.colors(). I have already tried using LocalContentColor, LocalTextSelectionColors, and also wrapping the composable with Modifier.border, but none of these approaches affect the actual border drawn by the internal TextField. I also found this open issue that seems related and is still unresolved: https://issuetracker.google.com/issues/315689926. Is there any supported way to change the focused or unfocused border color of the input fields inside TimeInput without copying or forking the Material component, or is forking currently the only viable solution? If necessary I can provide a minimal reproducible example.

falsetto's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.