Jetpack Compose Otp Text Field

How to integrate into your app?

Step 1. Add the JitPack repository to your settings.gradle

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        
        //add this line
        maven { url 'https://jitpack.io' }
    }
}

Step 2. Add the dependency to your build.gradle

dependencies {
	implementation 'com.github.NaufalRachmandani:OtpTextField:1.0'
}

How to use the library?

Okay seems like you integrated the library in your project but how do you use it? Well its really easy.

Using Compose Just use the OtpTextField composable where you need to display the view like.

....
OtpTextField(
	otpText = otp,
	onOtpTextChange = onOtpChange,
	isError = false,
	textStyle = TextStyle(
	    fontWeight = FontWeight.SemiBold,
	    fontSize = 14.sp
	),
	focusedBorderColor = neutral100,
	unFocusedBorderColor = neutral60,
	backgroundColor = Color(0xFFFFFFFF),
	focusedTextColor = neutral60,
	unFocusedTextColor = neutral100,
	focusedBorderErrorColor = primaryRed,
	unFocusedBorderErrorColor = primaryRedHover,
	backgroundErrorColor = primaryRedFocus,
	focusedTextErrorColor = neutral60,
	unFocusedTextErrorColor = neutral100,
)
....

Author

Created by Naufal Rachmandani

Bug reports and pull requests are welcome.

GitHub

View Github