Otp View – Jetpack Compose

A custom text field to enter a code usually used in cases of authentication.

Getting Started

Step 1. Include repository jitpack io in gradle (project).

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

Step 2. Add the dependency in gradle (app).

dependencies {
    implementation("com.sugarspoon.otpview:$latest_version")
}

How to use the component?

var otpValue by remember { mutableStateOf("") }
var isError by remember { mutableStateOf(false) }
OtpView(
    modifier = Modifier,
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = BackgroundPinColor,
        textColor = TextColor,
        errorLabelColor = FeedbackError,
        errorCursorColor = FeedbackError,
        errorIndicatorColor = FeedbackError
    ),
    onAllDigitsFilled = { digitsFilled ->
        otpValue = digitsFilled
        isError = otpValue != "1234"
    },
    isError = isError,
    isEnable = true,
    isSecret = true,
    onPressedDelKey = {
        isError = false
    },
    styles = OtpViewStyles.default(otpSize = OtpSize.FOUR, shape = state.shape)
)
Param Description
modifier An ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listenersdecorate or add behavior to rows, text or buttons.
colors Represents the colors of the input text, background and content used in a text field in different states.
styles Defines text style, shape and number of text fields.
isSecret Defines whether to show or hide the entered number. Default [false]
isError Indicates if the text field’s current value is in error state. If set to true, the label, shape and border will be displayed in error color. Default [false]
isEnabled Controls the enabled state of the [OtpView]. When false, the text field will be neither editable nor focusable, the input of the text field will not be selectable.
keyboardType The keyboard type to be used in this text field. Note that this input type is honored by keyboard and shows corresponding keyboard but this is not guaranteed. For example, some keyboards may send non-ASCII character even if you set KeyboardType.Ascii.
visualTransformation transforms the visual representation of the input value.When [isSecret] is true this visual transformation will be applied. Default [OtpViewVisualTransformation]
onAllDigitsFilled Indicates when all fields are filled.
onPressDellKey Indicates when delete key is pressed.

GitHub

View Github