Compose-TextField-Thousands-Separator icon indicating copy to clipboard operation
Compose-TextField-Thousands-Separator copied to clipboard

Thousands-Separator implemented for Jetpack Compose's TextFields using a visual transformation

Compose Thousands Separator for TextFields

You can find the code and the required tests for implementation of a thousands separator inside a TextField in compose.

You can find the main file here and the tests here.

Note: The space for the added thousands separator is accounted for the next number. So in 1,234, index 1 and 2 both map to the end of space between 1 and 2.

To be exact, by clicking the comma (as for pointing the cursor), the cursor is always put before the 2 and after the comma (even if behind the comma was clicked). This is the same behavior as Compose's own credit card number example.

Note: You can have your own implementation of a thousand separator (based on locale or ...) and pass it as thousandSeparator argument.