Number input

number input

Input elements of type numbers are used to let the user enter a number. This can be used to reject non-numerical entries or select quantities.

Usage

number input

val number = remember { mutableStateOf(234) }
val state = remember { mutableStateOf(XelaNumberInputState.DEFAULT) }

XelaNumberInput(
    value = number,
    state = state,
    decreaseIcon = R.drawable.ic_circle_minus,
    increaseIcon = R.drawable.ic_circle_plus,
    controls = XelaNumberInputControls.LEFTRIGHT,
    label = "Label",
    helperText = "Helper text"
)

Properties

Name Type Default Value Required Description
value MutableState <Int> - YES Mutable value for number input
state MutableState<XelaNumberInputState> - YES Mutable state for number input (DEFAULT, ERROR, SUCCESS, FOCUS, DISABLED)
decreaseIcon Int - YES Decrese Icon name from Drawable
increaseIcon Int - YES Increase Icon name from Drawable
helperText String? null NO Helper text for number input
label String? null NO Label text for number input
controls XelaNumberInputControls XelaNumberInputControls.LEFTRIGHT NO Controls position (LEFT, RIGHT, LEFTRIGHT)
labelColor Color XelaColor.Gray8 NO Label text color
valueColor Color XelaColor.Gray2 NO Value text color
helperTextColor Color XelaColor.Gray8 NO Helper text color
controlsColor Color XelaColor.Gray2 NO Controls icons color
defaultBackground Color Color.White NO Default background color
disabledBackground Color XelaColor.Gray12 NO Disabled background color
defaultBorderColor Color XelaColor.Gray11 NO Default state border color
focusBorderColor Color XelaColor.Blue5 NO Focus state border color
errorBorderColor Color XelaColor.Red3 NO Error state border color
successBorderColor Color XelaColor.Green1 NO Success state border color
disabledBorderColor Color XelaColor.Gray8 NO Disabled state border color