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

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