Custom Compose OtpTextField that can be used as an OTP field for authentication, PIN code, or any behavior that requires a password


Installation in your Project

Step 1. Add the repository in your root build.gradle:

allprojects {
	repositories {
		maven { url 'https://jitpack.io' }

Step 2. Add the dependency

dependencies {
        implementation 'com.github.SamirAhmedSaad:OtpTextField:v0.0.4-beta' 

How to use the library?

var otpText by remember { mutableStateOf(TextFieldValue()) }
var isHasError by remember { mutableStateOf(false) }
var cellProperties by remember { mutableStateOf(OtpCellProperties()) }

    modifier = Modifier.fillMaxWidth(),
    otpText = otpText,
    isHasError = isHasError,
    otpCellProperties = OtpCellProperties(),
    onValueChange = {
    onOtpFinished = {

Customize Otp Cell using OtpCellProperties

    otpLength = 6,
    otpCellSize = 50.dp,
    otpDistanceBetweenCells = 10.dp,
    otpTextStyle = TextStyle(),
    borderWidth = 1.dp,
    borderRound = 8.dp,
    cursorWidth = 2.dp,
    cursorColor = Color.Black,
    hint = ""
Parameter Use
otpLength sets the length of otp
otpCellSize sets the size(width/height) of otp cell
otpDistanceBetweenCells sets the distance among cells
otpTextStyle sets the text style for otp text
borderWidth sets the cell border width
isHasCursor sets if otp cell should has cursor or not
cursorWidth sets cursor width
cursorColor sets cursor color
hint sets hint for otp cells


Maintained by Samir Ahmed Linkedin


  • Bug reports and pull requests are welcome.


View Github