Components

TextArea

Used to enter long text input which spans over multiple lines

Usage

Textarea or in iOS we called it Text View is element that displays text to the user

Use Legion Textview provide user-editable text, with support lots type and attribute to customize.

    import LegionUI

Variant

Legion Have 2 Variant of Textview :

Outline

Choose type textfield : LGNOutlineTxtView and use this Function : .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 {
    VStack {
        LGNOutlineTxtView(
            titleKey: "Placeholder",
            text: $text
        )
    }
}

B. Outline success

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

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 = ""
var body: some View {
    VStack {
        LGNOutlineTxtView(
            titleKey: "Placeholder",
            text: $text
        )
        .state(.focussed)
    }

Inline

Choose type textfield : LGNInlineTxtView and use this Function : .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 {
    VStack {
        LGNInlineTxtView(
            titleKey: "Placeholder",
            text: $text
        )
    }
}

B. Inline success

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

C. Inline error

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

D. Inline focussed

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

Attribute

Legion Have 3 Attributes for Costumize Textview :

Disable

This disable attribute for user to inactive the textview.

Choose type textview LGNOutlineTxtView or LGNInlineTxtView and add .disable

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

A. Outline disable

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

B. Inline disable

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

Label

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

Choose Type textview LGNOutlineTxtView or LGNInlineTxtView and add label: with value of the label

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

A. Outline label

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

B. Inline label

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

Caption

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

Choose Type textview LGNOutlineTxtView or LGNInlineTxtView and add label: with value of the label

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

A. Outline caption

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

B. Inline caption

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

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 text to display and edit	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	Will show prefix content with position left side in text field	nil (literal null value for objective-C classes)
sufix	Will show prefix 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