ComposeOTPView

A lightweight, customizable OTP (One-Time Password) input view built with Jetpack Compose. Supports multiple visual styles including box, underline, and plain modes with full control over colors, sizes, and behavior.

Features

• Three visual types: Box, Underline, and None
• Password masking support with custom mask character
• Customizable character color, size, and container size
• Configurable OTP length (digit count)
• Custom stroke/border color
• Keyboard type configuration via KeyboardOptions
• Minimal and composable-friendly API

Dependency

Add the JitPack repository to your project's settings.gradle.kts or root build.gradle.kts:

Step 1: Add the JitPack repository in settings.gradle.kts:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
    }
}

Step 2: Add the dependency in your module's build.gradle.kts:

implementation("com.github.Coderkube-App:ComposeOTPView:1.0.1")

Usage

import androidx.compose.runtime.*
import com.coderkube.otpview.OTP_VIEW_TYPE_BOX
import com.coderkube.otpview.OTP_VIEW_TYPE_UNDERLINE
import com.coderkube.otpview.OTP_VIEW_TYPE_NONE
import com.coderkube.otpview.OtpView

@Composable
fun OtpExample() {
    var otpValue by remember { mutableStateOf("") }

    OtpView(
        otpText = otpValue,
        onOtpTextChange = { otpValue = it },
        otpCount = 6,
        type = OTP_VIEW_TYPE_BOX,
        charColor = Color.Blue,
        strokeColor = Color.Blue,
        charSize = 20.sp,
        containerSize = 48.dp,
        password = true,
        passwordChar = "*",
        charBackground = Color.LightGray,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        enabled = true,
        modifier = Modifier.fillMaxWidth()
    )
}

Attributes

Attribute	Type	Default	Description
modifier	Modifier	Modifier	Compose modifier for the text field
otpText	String	""	Current OTP input value
charColor	Color	Color.Black	Color of the OTP character text
charBackground	Color	Color.Transparent	Background color of each OTP cell
charSize	TextUnit	16.sp	Font size of OTP characters
strokeColor	Color	Color.Black	Color of the border (Box type) or underline (Underline type)
containerSize	Dp	charSize * 2	Width and height of each OTP cell
otpCount	Int	4	Number of OTP digits
type	Int	OTP_VIEW_TYPE_UNDERLINE	Visual style: OTP_VIEW_TYPE_NONE, OTP_VIEW_TYPE_UNDERLINE, or OTP_VIEW_TYPE_BOX
enabled	Boolean	true	Whether the input field is interactive
password	Boolean	false	If true, masks the entered characters
passwordChar	String	""	Character used for masking when password = true
keyboardOptions	KeyboardOptions	KeyboardOptions(keyboardType = KeyboardType.Number)	Keyboard configuration
onOtpTextChange	(String) -> Unit	required	Callback invoked with the full OTP string on every change

Type Constants

Constant	Value	Description
OTP_VIEW_TYPE_NONE	0	Plain text with background only, no border or underline
OTP_VIEW_TYPE_UNDERLINE	1	Underline beneath each character (default)
OTP_VIEW_TYPE_BOX	2	Bordered box around each character

Contributing

Contributions are welcome! Feel free to submit issues or pull requests on the GitHub repository.

License

Copyright 2026 Coderkube-App

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.