# Jetpack Compose OTP input field

DevFeed: [Jetpack Compose OTP input field](<https://devfeed.tech/articles/jetpack-compose-otp-input-field-25853.md>)

Original publisher: [Read original article](<https://proandroiddev.com/jetpack-compose-otp-input-field-bcfa22c85e5f?source=rss-8aced922ece------2>)

Author: Ban Markovic

Published: 2022-12-19T14:51:05Z

Content type: tutorial

Language: en

Sources: [Stories by Ban Markovic on Medium](<https://devfeed.tech/sources/stories-by-ban-markovic-on-medium.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [Android](<https://devfeed.tech/topics/android.md>), [android-development](<https://devfeed.tech/topics/android-development.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Code](<https://devfeed.tech/topics/code.md>), [Development](<https://devfeed.tech/topics/development.md>), [Authentication](<https://devfeed.tech/topics/authentication.md>), [implementation](<https://devfeed.tech/topics/implementation.md>), [Material Design](<https://devfeed.tech/topics/material-design.md>), [passwords](<https://devfeed.tech/topics/passwords.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [android-app-development](<https://devfeed.tech/tags/android-app-development.md>), [android-development](<https://devfeed.tech/tags/android-development.md>), [androiddev](<https://devfeed.tech/tags/androiddev.md>), [authentication](<https://devfeed.tech/tags/authentication.md>), [code](<https://devfeed.tech/tags/code.md>), [component](<https://devfeed.tech/tags/component.md>), [compose](<https://devfeed.tech/tags/compose.md>), [compose-ui](<https://devfeed.tech/tags/compose-ui.md>), [development](<https://devfeed.tech/tags/development.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [material-design](<https://devfeed.tech/tags/material-design.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [mobile-apps](<https://devfeed.tech/tags/mobile-apps.md>), [otp](<https://devfeed.tech/tags/otp.md>), [password](<https://devfeed.tech/tags/password.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

A tutorial on building a customizable one-time password input field for Android with Jetpack Compose and BasicTextField. It explains why BasicTextField can be preferable to Material TextField for customization, configures a numeric password keyboard, and limits input to six digits.

## Source excerpt

One-time password (OTP), also called dynamic password, one-time PIN, and one-time authorization code (OTAC), is password that is only valid for one login session. Most commonly, it is received in a format of 4 or 6 digit code, through SMS, and it used for implementation of two-factor authentication. Implementing OTP support inside our mobile apps requires us to build a custom UI input field, which should be strictly customized for handling the received OTP code. Motivation Since Jetpack Compose is a new UI toolkit for Android development, I wanted to write an article regarding how we can make our own custom OTP input field using BasicTextField. Custom OTP input Creating input fields with Compose UI is quite simple. There is already an existing Material component called TextField, that we can use. It has a lot of built-in functionalities because it follows Material design principles. That also comes with some drawbacks, for example, if we wanted to customize our input field, we would have struggled to do so with TextField, because it isn't as flexible. That's why we need another component that is a bit lower-level compared to TextField, but it enables us to customize it the way that suits us the best. I'm talking about BasicTextField. Implementation Firstly, lets implement a simple BasicTextField that enables it to open a keyboard with only numbers. We can do that by setting up the keybaordOptions parameter with keyboardType set to NumberPassword. If you've wondered why we use NumberPassword and not just Number, it is because the keyboard that is opened for the Number keyboard type contains dot, comma and dash characters, and we don't need anything other than digits inside our OTP input field. Next step we need to do is to implement more restrictions inside our input field. In case we know that our OTP must be a 6 digit code, our input field should be able to receive max 6 digits, and not allow user to input more than that. To accomplish max characters restriction, w