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

import SwiftUI

struct ExampleView: View {

    @State var number1:Int = 1
    @State var number1HelperText:String = "Helper Text"
    @State var number1State:XelaNumberInputState = .Default

    var body: some View {
        XelaNumberInput(
            value: $number1,
            helperText: $number1HelperText,
            label: "label",
            state: $number1State,
            controls: .LeftRight,
            decreaseIcon: "decrease",
            increaseIcon: "increase"
        )
    }
}

Properties

Name Type Default Value Required Description
value Binding < Int > - YES Binding value for number input
helperText Binding < String > - YES Binding helper text for number input
label String? nil NO Label text for number input
state XelaNumberInputState - YES Binding state for number input (.Default, .Hover, .Error, .Success, .Focus, .Disabled)
controls XelaNumberInputControls .LeftRight NO Controls position (.Left, .Right, .LeftRight)
decreaseIcon String - YES Decrese Icon name from Assets
increaseIcon String - YES Increase Icon name from Assets
labelColor Color Color(xelaColor: .Gray8) NO Label text color
valueColor Color Color(xelaColor: .Gray2) NO Value text color
helperTextColor Color Color(xelaColor: .Gray8) NO Helper text color
controlsColor Color Color(xelaColor: .Gray2) NO Controls icons as .template rendered mode foreground color
defaultBackground Color Color(.white) NO Default background color
disabledBackground Color Color(xelaColor: .Gray12) NO Disabled background color
defaultBorderColor Color Color(xelaColor: .Gray11) NO Default state border color
focusBorderColor Color Color(xelaColor: .Blue5) NO Focus state border color
errorBorderColor Color Color(xelaColor: .Red3) NO Error state border color
successBorderColor Color Color(xelaColor: .Green1) NO Success state border color
hoverBorderColor Color Color(xelaColor: .Blue5) NO Hover state border color
disabledBorderColor Color Color(xelaColor: .Gray8) NO Disabled state border color