Biofarma | Bind UI

PIN Input

The PIN input field is often used when users are required to provide a string of characters to securely access their accounts and data and authorize sensitive actions.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

PIN Input Preview

Usage

import id.co.biofarma.binduiandroid.components.pin_input.PinInput

PinInput(
    label = "Label",
    pinLength = 6,
    helperText = "Helper text",
    errorText = "Error message",
    //isError = isError.value,
    value = pin,
    onComplete = {
        Toast.makeText(context, "$it", Toast.LENGTH_SHORT).show()
    },
    isError = false,
    isDisabled = false,
    onValueChange = { value ->
        Log.d("PinInput", "value change: ${value}")
    }
)

Examples

Disabled (optional)

Use disabled to restrict the input pin value from being entered.

PIN Input Example Disabled

Error (optional)

Use error when there is an error in the pininput value.

PIN Input Example Error

Mode (optional)

Use mode to use dark or light.

PIN Input Example Mode

Props

Props	Required	Default	Type	description
id	false	-	`string`	A unique identifier for the pin input.
style	false	-	`Modifier`	Custom styles for the pin input component.
label	false	-	`string`	The label text for the pin input.
cellSize	false	-	`Float = dpToPx(18f)`	Cell size for each input pin field.
cellPadding	false	-	`Float = dpToPx(4f)`	Cell padding for each input pin field.
rowPadding	false	-	`Float = dpToPx(4f)`	Row padding for each input pin field.
cellShape	false	-	`Shape = RoundedCornerShape(4.dp)`	Cell shape for each input pin field.
cellBorderWidth	false	-	`Float = dpToPx(0.5f)`	Cell border width for each input pin field.
values	false	-	`string`	The information value of the pin input.
onValueChange	false	-	`(String) -> Unit`	A callback function to be executed when entering the value of an pin input.
helperText	false	-	`string`	Helper text information to provide pin input information.
errorText	false	-	`string`	Error text information to provide input pin information if it is an error.
pinLength	false	-	`int`	Value with the length of the pin input.
isError	false	`false`	`boolean`	If true, pin input will be set to error state.
isDisabled	false	`false`	`boolean`	If true, pin input will be set to disabled state.
errorText	false	-	`string`	Error text information to provide input pin information if it is an error.
disabled	false	`false`	`boolean`	If true, pin input will be set to disabled state.
onComplete	false	-	`((String) -> Unit)`	A callback function that will be executed when finished entering the pin input value.

Input Radio Button