Components

Textfield

Used to enter spesific text input form

Usage

Textfield are used to defines a text input control.

Use Legion Textfield styles allow users to type text into an app, with support lots type and attribute to customize.

    import LegionUI

Variant

Legion IOS Have 2 Variant of Textfield :

Outline

idle

success

error

focussed

Don’t forget to state variable before body!

Choose type textfield : LGNOutlineTxtField and use this Function : @State var state: LGNStateField = .TextType, where the .TextTypeconsists of .success , .error and .focussed

This code sample demonstrates how to modify the type of the textfield :

A. Outline idle

   @State var text: String = ""
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
    }

B. Outline success

    @State var text: String = ""
    @State var state: LGNStateField = .success
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
        .state(state)
    }

C. Outline error

    @State var text: String = ""
    @State var state: LGNStateField = .error
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
        .state(state)
    }

D. Outline focussed

    @State var text: String = ""
    @State var state: LGNStateField = .focussed
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
        .state(state)
    }

Inline

idle

success

error

focussed

Don’t forget to state variable before body!

Choose type textfield : LGNInlineTxtField and use this Function : @State var state: LGNStateField = .TextType, where the .TextTypeconsists of .success , .error and .focussed

This code sample demonstrates how to modify the type of the textfield :

A. Inline idle

    @State var text: String = ""
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
    }

B. Inline success

    @State var text: String = ""
    @State var state: LGNStateField = .success
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
        .state(state)
    }

C. Inline error

    @State var text: String = ""
    @State var state: LGNStateField = .error
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
        .state(state)
    }

D. Inline focussed

   @State var text: String = ""
    @State var state: LGNStateField = .focussed
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
        .state(state)
    }

Attribute

Legion Have 6 Attributes for Costumize Textfield :

Disable

This disable attribute for user to inactive the textfield.

Outline Textfield

Inline Textfield

Choose type textfield LGNOutlineTxtField or LGNInlineTxtField and add @State var state: LGNStateField = with .disable

This code sample demonstrates how to modify the disable of the textfield :

A. Outline disable

    @State var text: String = ""
    @State var state: LGNStateField = .disable
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
        .state(state)
    }

B. Inline disable

    @State var text: String = ""
    @State var state: LGNStateField = .disable
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
        .state(state)
    }

Icon

Outline Textfield

Inline Textfield

This icon attribute for user to choose the icon position inside the textfield.

Choose Type Textfield LGNOutlineTxtField or LGNInlineTxtField and add leftIcon: Image(systemName: "") where the systemName: “” fill with the icon

This code sample demonstrates how to modify the icon of the textfield :

A. Outline Icon

    @State var text: String = ""
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            leftIcon: Image(systemName: "info.circle")
        )
    }

B. Inline Icon

   @State var text: String = ""
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            leftIcon: Image(systemName: "info.circle")
        )
    }

Label

Outline Textfield

Inline Textfield

This label attribute for user to customize label of the textfield.

Choose Type Textfield LGNOutlineTxtField or LGNInlineTxtField and add label: with value of the label

This code sample demonstrates how to modify the label of the textview :

A. Outline Icon

   @State var text: String = ""
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            label: "title"
        )
    }

B. Inline Icon

   @State var text: String = ""
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            label: "title"
        )
    }

Caption

This caption attribute for user to customize caption under of the textfield:

Outline Textfield

Inlline textfield

Caption With Image

Caption Without Image

With Image

This code sample demonstrates how to modify the caption of the textview :

A. Outline Image

    @State var text: String = ""
    @State var showCaption: Bool = true
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
        .showCaption(
            caption: LGNContentModel(

B. Inline Image

    @State var text: String = ""
    @State var showCaption: Bool = true
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text
        )
        .showCaption(
            caption: LGNContentModel(

Without Image

This code sample demonstrates how to modify the caption of the text view :

A. Outline Without Image

    @State var text: String = ""
    @State var showCaption: Bool = true
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text,
        )
        .showCaption(
            caption: LGNContentModel(text: "text"),

B. Inline Without Image

    @State var text: String = ""
    @State var showCaption: Bool = true
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text,
        )
        .showCaption(
            caption: LGNContentModel(text: "text"),

Prefix

This Prefix attribute for user to customize value prefix of the textfield

Outline Textfield

Inlline textfield

Prefix with Image

Prefix Without Image

The prefix sets or returns the namespace prefix of an attribute.

This code sample demonstrates how to modify the prefix of the textview :

Prefix With Image

A. Outline Prefix Image

    @State var text: String = ""
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            prefix: LGNContentModel(
                image: Image(systemName: "chevron.right"),
                text: "prefix"
                )

B. Inline Preffix Image

    @State var text: String = ""
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            prefix: LGNContentModel(
                image: Image(systemName: "chevron.right"),
                text: "prefix"
                )

Prefix Without Image

A. Outline Preffix Without Image

    @State var text: String = ""
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            prefix: LGNContentModel(text: "prefix")
        )
    }

B. Inline Preffix Without Image

    @State var text: String = ""
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            prefix: LGNContentModel(text: "prefix")
        )
    }

Suffix

This Suffix attribute for user to customize value suffix of the textfield

Outline Textfield

Inlline textfield

Suffix with Image

Suffix without Image

The suffix sets or returns the namespace suffix of an attribute.

This code sample demonstrates how to modify the suffix of the textview :

Suffix With Image

A. Outline Suffix Image

    @State var text: String = ""
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            suffix: LGNContentModel(
                image: Image(systemName: "chevron.left"),
                text: "suffix"
                )

B. Inline Suffix Image

    @State var text: String = ""
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            suffix: LGNContentModel(
                image: Image(systemName: "chevron.left"),
                text: "suffix"
                )

Suffix Without Image

A. Outline Suffix Without Image

    @State var text: String = ""
    var body: some View {
        LGNOutlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            suffix: LGNContentModel(text: "suffix")
        )
    }

B. Inline Suffix Without Image

    @State var text: String = ""
    var body: some View {
        LGNInlineTxtField(
            titleKey: "Placeholder",
            text: $text,
            suffix: LGNContentModel(text: "suffix")
        )
    }

Properties

Properties	Description	Default Value
titleKey	The key for the localized title of the text field, describing its purpose, default value is empty string	empty string ""
text	The key for the localized title of the text field, describing its purpose, default value is empty string	not have
label	The label to represent the title of the text field, default value is nil	nil (literal null value for objective-C classes)
leftIcon	The icon is on the left of the text	nil (literal null value for objective-C classes)
prefix	The icon is on the left of the text	nil (literal null value for objective-C classes)
sufix	To show suffix content with position right side in text field	nil (literal null value for objective-C classes)
defaultBorderColor	The color will appear on the border of the text field, default value is Color tertiary300	`color.tertiary300`
errorBorderColor	The color will appear on the border of the text field, default value is Color tertiary300	`color.error500`
successBorderColor	The color will appear on the border of the text field on the success state, default value is Color success500	`color.error500`

Do you have feedback?

Please let us know to make it better

Send Feedback