Want to create typical code input like at <the pic...

# compose

[iamthevoid]

Want to create typical code input like at

the picture from internets▾

. What is the best option in compose to do the same? I should request user input somehow. Few years ago i did same with invisible EditText, that request focus and user input on screen start and on screen click. But it is impossible in compose.

[iamthevoid]

I’ve found

LocalTextInputService.current

Looks like it is what am i looking for

[iamthevoid]

But how can i change input type? (from text to digits)

[iamthevoid]

imeOptions exactly what i am looking for! Thanks everybody )

[Albert Chang]

Actually I think implementing the number pad yourself would probably be easier. I've done

that▾

and it's simple.

[iamthevoid]

I have already did this with BasicTextField (with transparent cursor ant text) and FocusRequester. A piece of cake )

[Jeff]

Do you have a sample @iamthevoid

[iamthevoid]

Sure, but afk already. Will send later

[iamthevoid]

@Jeff Now it looks like that

@Composable
fun CodeDots(
    state: CodeState,
    onCodeChange: (String) -> Unit,
    onCodeCompleted: (CodeState) -> Unit,
    modifier: Modifier = Modifier
) {
    val focusRequester = remember { FocusRequester() }

    RequestFocusOnStart(focusRequester = focusRequester)

    Box(
        modifier = modifier.clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null,
            onClick = focusRequester::requestFocus
        ),
        contentAlignment = Alignment.Center
    ) {
        BasicTextField(
            value = state.code,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
            onValueChange = {
                filterInput(it, state.codeLength).also { code ->
                    onCodeChange(code)
                    if (code.length == state.codeLength) {
                        onCodeCompleted(state.copy(code = code))
                    }
                }
            },
            textStyle = TextStyle.Default.copy(color = Color.Transparent),
            modifier = Modifier.focusRequester(focusRequester),
            cursorBrush = SolidColor(Color.Transparent)
        )
        Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
            for (i in 0 until state.codeLength) {
                Element(char = state.code.getOrNull(i), error = state.error)
            }
        }
    }
}

[Nipun Rajput]

@iamthevoid So whats the problem here? i guess this should be working if you want under here just set the image inside Box, also you can hide dot line if text is entered, you have to take out focusRequester reference out side this composable function

[iamthevoid]

@Nipun Rajput This snippet is not a problem, but it is the solution ) I decided that @Jeff want to look how to i resolve this case, because he ask a sample after i said about my win

[Nipun Rajput]

Untitled

[Nipun Rajput]

@iamthevoid Yes your sample would be the solution for now

[Jeff]

Thanks @iamthevoid will check it out