Jetpack Compose equivalent to InputFilter?

Question

I'm looking for an equivalent method of EditText's InputFilter in Jetpack Compose TextField.

Because I'm trying to prevent users input unwanted values like %@*()- characters for example.

Answer 1

There is a solution with Regex here:

@Composable
fun FilteredTextField(
    text: String,
    onChanged: (String) -> Unit,
    ignoredRegex: Regex
) {
    TextField(value = text,
        onValueChange = {
            if (!it.contains(ignoredRegex)) onChanged(it)
        }
    )
}

Using:

@Composable
fun FilteredTextFieldDemo() {
    var text by remember { mutableStateOf("") }
    FilteredTextField(
        text = text,
        onChanged = { text = it },
        ignoredRegex = Regex("[%@*()-]")
    )
}

Answer 2

If you just want to display the numberOnly keyboard, we can do this way:

TextField(
     value = textState,
     onValueChange = { text ->
         textState = text
     },
     keyboardOptions = KeyboardOptions.Default.copy(
         keyboardType = KeyboardType.NumberPassword
     ),
     visualTransformation = VisualTransformation.None
)