Text Input

text input

Text Input fields allow users to add and edit text.

Usage

text input

import SwiftUI

struct ExampleView: View {

    @State var textfieldValue:String = ""
    @State var textfieldHelperText:String = ""
    @State var textfieldState:XelaTextFieldState = .Default

    var body: some View {
        XelaTextField(
            placeholder: "TextField Placeholder", 
            value: $textfieldValue, 
            state: $textfieldState, 
            helperText: $textfieldHelperText
        )
        .padding()
    }
}

Properties

Name Type Default Value Required Description
placeholder String - YES Textfield placeholder
value Binding < String > - YES Binding value string
state Binding < XelaTextFieldState > - YES Binding textfield state (.Default, .Hover, .Error, .Success, .Focus, .Disabled)
helperText Binding < String > - YES Binding helper text
leftIcon String? nil NO Left Icon name from Assets
rightIcon String? nil NO Right Icon name from Assets
disableAutocorrection Bool false NO Textfield autocorrection disable
secureField Bool false NO Textfield as Securefield
background Color Color(.white) NO Textfield background color
disabledBackground Color Color(xelaColor: .Gray12) NO Disable Textfield background color
placeholderColor Color Color(xelaColor: .Gray8) NO Placeholder color
textfieldColor Color Color(xelaColor: .Gray) NO Textfield text color
disabledTextfieldColor Color Color(xelaColor: .Gray8) NO Disabled textfield text color
borderDefaultColor Color Color(xelaColor: .Gray11) NO Textfield default border color
borderDisabledColor Color Color(xelaColor: .Gray8) NO Textfield disabled border color
borderErrorColor Color Color(xelaColor: .Red3) NO Textfield error border color
borderSuccessColor Color Color(xelaColor: .Green1) NO Textfield success border color
borderHoverColor Color Color(xelaColor: .Blue5) NO Textfield hover border color
borderFocusColor Color Color(xelaColor: .Blue5) NO Textfield focus border color
iconDefaultColor Color? nil NO Icons default color
iconDisabledColor Color Color(xelaColor: .Gray8) NO Icons disabled color
iconErrorColor Color Color(xelaColor: .Red3) NO Icons error color
iconSuccessColor Color Color(xelaColor: .Green1) NO Icons success color
defaultHelperTextColor Color Color(xelaColor: .Gray8) NO Default helper text color
disabledHelperTextColor Color Color(xelaColor: .Gray8) NO Disabled helper text color
errorHelperTextColor Color Color(xelaColor: .Red3) NO Error helper text color
successHelperTextColor Color Color(xelaColor: .Green1) NO Success helper text color