class OtpAnimationSpec(val shakeOnError: Boolean, val cellEntryAnimation: CellAnimation, val animationDuration: Int, val shakeAmplitude: Dp, val shakeStepDuration: Int, val shakeRepeatCount: Int)

Animation settings for OTP cells. Get one from OtpInputDefaults.animationSpec.

OtpCellColors

@Immutable

class OtpCellColors(val focusedBorderColor: Color, val unfocusedBorderColor: Color, val errorBorderColor: Color, val filledBorderColor: Color, val focusedContainerColor: Color, val unfocusedContainerColor: Color, val errorContainerColor: Color, val filledContainerColor: Color, val textColor: Color, val cursorColor: Color, val placeholderColor: Color)

Colors for an OTP cell in each of its states.

OtpCellDimensions

@Immutable

class OtpCellDimensions(val cellWidth: Dp, val cellHeight: Dp, val borderWidth: Dp, val focusedBorderWidth: Dp, val cornerRadius: Dp, val spacing: Dp, val textSize: TextUnit)

Sizes used by an OTP cell. Get one from OtpInputDefaults.dimensions.

OtpCellPadding

@Immutable

class OtpCellPadding(val horizontal: Dp, val vertical: Dp)

Padding inside each OTP cell. Get one from OtpInputDefaults.contentPadding.

OtpCellState

@Immutable

class OtpCellState(val index: Int, val char: Char?, val isFocused: Boolean, val isError: Boolean, val isEnabled: Boolean)

What a single cell needs to know to draw itself. OtpInputField passes one to its cell slot.

OtpCursorConfig

@Immutable

class OtpCursorConfig(val color: Color, val width: Dp, val height: Dp, val cornerRadius: Dp, val blinkInterval: Long)

The blinking bar shown in the focused cell while it's empty. Get one from OtpInputDefaults.cursorConfig.

OtpInputDefaults

object OtpInputDefaults

Default values for OtpInputField and the built-in cells.

OtpInputTransformation

class OtpInputTransformation(otpLength: Int) : InputTransformation

Keeps a text field to at most otpLength ASCII digits.

OtpMaskConfig

@Immutable

class OtpMaskConfig(val isMasked: Boolean, val maskCharacter: Char, val maskDelay: Long)

Hides entered digits behind maskCharacter after they have been visible for maskDelay milliseconds, the way password fields on phones do. Get one from OtpInputDefaults.maskConfig.

OtpTextStyles

@Immutable

class OtpTextStyles(val filledTextStyle: TextStyle, val placeholderTextStyle: TextStyle)

Text styles for a cell holding a character and for an empty cell showing the placeholder. Get one from OtpInputDefaults.textStyles.

Properties

otpValue

val TextFieldState.otpValue: String

The current text as a plain String.

Functions

clearOtp

fun TextFieldState.clearOtp()

CountdownTimer

@Composable

fun CountdownTimer(state: CountdownTimerState, modifier: Modifier = Modifier, style: CountdownTimerStyle = CountdownTimerDefaults.style(), dimensions: CountdownTimerDimensions = CountdownTimerDefaults.dimensions(), onTimerFinish: () -> Unit = {})

Shows the time left on state as HH : MM : SS boxes, and hides itself when it reaches zero.

DefaultOtpCell

@Composable

fun DefaultOtpCell(state: OtpCellState, modifier: Modifier = Modifier, placeholder: String = "", colors: OtpCellColors = OtpInputDefaults.colors(), dimensions: OtpCellDimensions = OtpInputDefaults.dimensions(), animationSpec: OtpAnimationSpec = OtpInputDefaults.animationSpec(), shape: Shape = OtpInputDefaults.shape(dimensions.cornerRadius), maskConfig: OtpMaskConfig = OtpInputDefaults.maskConfig(), cursorConfig: OtpCursorConfig = OtpInputDefaults.cursorConfig(color = colors.cursorColor), textStyles: OtpTextStyles = OtpInputDefaults.textStyles(dimensions.textSize), contentPadding: OtpCellPadding = OtpInputDefaults.contentPadding())

The rounded box cell OtpInputField uses when you don't pass your own cell.

fillOtp

fun TextFieldState.fillOtp(otp: String, length: Int)

Replaces the content with the first length digits of otp, for example a code read from SMS.

isOtpComplete

fun TextFieldState.isOtpComplete(length: Int): Boolean

True once the field holds length characters.

OtpInputField

@Composable

fun OtpInputField(state: TextFieldState, otpLength: Int, modifier: Modifier = Modifier, enabled: Boolean = true, isError: Boolean = false, placeholder: String = "", colors: OtpCellColors = OtpInputDefaults.colors(), dimensions: OtpCellDimensions = OtpInputDefaults.dimensions(), animationSpec: OtpAnimationSpec = OtpInputDefaults.animationSpec(), shape: Shape = OtpInputDefaults.shape(dimensions.cornerRadius), maskConfig: OtpMaskConfig = OtpInputDefaults.maskConfig(), cursorConfig: OtpCursorConfig = OtpInputDefaults.cursorConfig(color = colors.cursorColor), textStyles: OtpTextStyles = OtpInputDefaults.textStyles(dimensions.textSize), contentPadding: OtpCellPadding = OtpInputDefaults.contentPadding(), keyboardOptions: KeyboardOptions = OtpInputDefaults.keyboardOptions, inputTransformation: InputTransformation? = null, onComplete: (code: String) -> Unit? = null, separator: @Composable (afterIndex: Int) -> Unit? = null, cell: @Composable (OtpCellState) -> Unit = { cellState -> DefaultOtpCell( state = cellState, placeholder = placeholder, colors = colors, dimensions = dimensions, animationSpec = animationSpec, shape = shape, maskConfig = maskConfig, cursorConfig = cursorConfig, textStyles = textStyles, contentPadding = contentPadding, ) })

An input for one-time codes that draws each digit in its own cell.

@Composable

fun OtpInputField(value: String, onValueChange: (String) -> Unit, otpLength: Int, modifier: Modifier = Modifier, enabled: Boolean = true, isError: Boolean = false, placeholder: String = "", colors: OtpCellColors = OtpInputDefaults.colors(), dimensions: OtpCellDimensions = OtpInputDefaults.dimensions(), animationSpec: OtpAnimationSpec = OtpInputDefaults.animationSpec(), shape: Shape = OtpInputDefaults.shape(dimensions.cornerRadius), maskConfig: OtpMaskConfig = OtpInputDefaults.maskConfig(), cursorConfig: OtpCursorConfig = OtpInputDefaults.cursorConfig(color = colors.cursorColor), textStyles: OtpTextStyles = OtpInputDefaults.textStyles(dimensions.textSize), contentPadding: OtpCellPadding = OtpInputDefaults.contentPadding(), keyboardOptions: KeyboardOptions = OtpInputDefaults.keyboardOptions, onComplete: (code: String) -> Unit? = null, separator: @Composable (afterIndex: Int) -> Unit? = null, cell: @Composable (OtpCellState) -> Unit = { cellState -> DefaultOtpCell( state = cellState, placeholder = placeholder, colors = colors, dimensions = dimensions, animationSpec = animationSpec, shape = shape, maskConfig = maskConfig, cursorConfig = cursorConfig, textStyles = textStyles, contentPadding = contentPadding, ) })

OtpInputField for state you keep as a String, for example in a ViewModel's UI state.

OutlinedOtpCell

@Composable

fun OutlinedOtpCell(state: OtpCellState, modifier: Modifier = Modifier, placeholder: String = "", colors: OtpCellColors = OtpInputDefaults.colors( focusedContainerColor = Color.Transparent, unfocusedContainerColor = Color.Transparent, filledContainerColor = Color.Transparent, errorContainerColor = Color.Transparent, ), dimensions: OtpCellDimensions = OtpInputDefaults.dimensions(cellHeight = OtpTokens.CellWidth), animationSpec: OtpAnimationSpec = OtpInputDefaults.animationSpec(), shape: Shape = CircleShape, maskConfig: OtpMaskConfig = OtpInputDefaults.maskConfig(), cursorConfig: OtpCursorConfig = OtpInputDefaults.cursorConfig(color = colors.cursorColor), textStyles: OtpTextStyles = OtpInputDefaults.textStyles(dimensions.textSize), contentPadding: OtpCellPadding = OtpInputDefaults.contentPadding())

A round cell with a transparent background. It's DefaultOtpCell with different defaults.

rememberCountdownTimerState

@Composable

fun rememberCountdownTimerState(endTimeMillis: Long): CountdownTimerState

Remembers a timer that ends at endTimeMillis, for example an expiry time sent by your backend. A different endTimeMillis creates a new timer.

@Composable

fun rememberCountdownTimerState(duration: Duration): CountdownTimerState

Remembers a timer that ends duration after it's first created. The end time is saved, so rotating the device or coming back to the screen doesn't restart the countdown.

UnderlineOtpCell

@Composable

fun UnderlineOtpCell(state: OtpCellState, modifier: Modifier = Modifier, placeholder: String = "", colors: OtpCellColors = OtpInputDefaults.colors(), dimensions: OtpCellDimensions = OtpInputDefaults.dimensions(), animationSpec: OtpAnimationSpec = OtpInputDefaults.animationSpec(), maskConfig: OtpMaskConfig = OtpInputDefaults.maskConfig(), cursorConfig: OtpCursorConfig = OtpInputDefaults.cursorConfig(color = colors.cursorColor), textStyles: OtpTextStyles = OtpInputDefaults.textStyles(dimensions.textSize), contentPadding: OtpCellPadding = OtpInputDefaults.contentPadding())

A cell drawn as a character above a line that changes color and thickness with the cell's state. The container colors from colors are not used.