Components
Textfield
Used to enter spesific text input form
Component Status Details
Status component contains a list of checks and completeness that has been tested and owned by each component
We don't use color as the only visual tool to convey information.
The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc. The title is the component name that uses the frame base component template. The base component name contains: .Base & "Component Name" if there is more than one. All component properties use the Legion foundation.
We can change all the parts that are connected to the component base. The inside of the base component remains connected to the master component. All variant options are not damaged when we change from one to another. Overriding changes to components will not reset other variants.
Component's already has component specs documentation.
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.
Usage Default LegionUI
InlineTxtField(text: .constant("hello"))OutlineTxtField(text: .constant("hello"))
Usage Theme
ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy
LGNInlineTextField(text: .constant("hello"))LGNOutlineTextField(text: .constant("hello"))
Variant
Default LegionUI
Outline
This code sample demonstrates how to modify the variant of the textfield :
OutlineTxtField(titleKey: "Placeholder",text: .constant("Hello"),textFont: Font.LGNTheme.bodyLargeRegular,label: "Title",leftIcon: Image(systemName: "heart"),prefix: LGNContentModel(image: Image(systemName: "heart"), text: "prefix text"),suffix: LGNContentModel(image: Image(systemName: "heart"), text: "suffix text"),defaultBorderColor: Color.LGNTheme.tertiary300,
Inline
This code sample demonstrates how to modify the variant of the textfield :
InlineTxtField(titleKey: "Placeholder",text: .constant("Hello"),textFont: Font.LGNTheme.bodyLargeRegular,label: "Title",leftIcon: Image(systemName: "heart"),prefix: LGNContentModel(image: Image(systemName: "heart"), text: "prefix text"),suffix: LGNContentModel(image: Image(systemName: "heart"), text: "suffix text"),defaultBorderColor: Color.LGNTheme.tertiary300,
View Text
This code sample demonstrates how to modify the variant of the textfield :
@State var text: String = ""var body: some View {LGNOutlineTextField(titleKey: "Placeholder",text: $text)).setRightView(Image(systemName: "eye"))}
Secure Text
This code sample demonstrates how to modify the variant of the textfield :
@State var text: String = ""@State var isSecured: Bool = truevar body: some View {LGNOutlineTxtField(titleKey: "Placeholder",text: $text).setSecured($isSecured)}
Attribute
ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy
ThemeAGR
Outline
LGNOutlineTextField( titleKey: "Placeholder", text: .constant("Hello"), textFont:Font.LGNTheme.bodyLargeRegular, label: "Title", leftIcon: Image(systemName: "heart"), prefix:LGNContentModel(image: Image(systemName: "heart"), text: "prefix text"), suffix: LGNContentModel(image:Image(systemName: "heart"), text: "suffix text"), defaultBorderColor: Color.LGNTheme.tertiary300,errorBorderColor: Color.LGNTheme.error500, successBorderColor: Color.LGNTheme.success500, focussedBorderColor:Color.LGNTheme.information500, textFontColor: .black ) .state(.error) // success, error, disable, idle, focused.showCaption(caption: LGNContentModel(image: Image(systemName: "heart"), text: "caption text"), showCaption:true)
Inline
LGNInlineTextField( titleKey: "Placeholder", text: .constant("Hello"), textFont: Font.LGNTheme.bodyLargeRegular,label: "Title", leftIcon: Image(systemName: "heart"), prefix: LGNContentModel(image: Image(systemName: "heart"),text: "prefix text"), suffix: LGNContentModel(image: Image(systemName: "heart"), text: "suffix text"),defaultBorderColor: Color.LGNTheme.tertiary300, errorBorderColor: Color.LGNTheme.error500, successBorderColor:Color.LGNTheme.success500, focussedBorderColor: Color.LGNTheme.information500, textFontColor: .black ).state(.success) // success, error, disable, idle, focused .showCaption(caption: LGNContentModel(image:Image(systemName: "heart"), text: "caption text"), showCaption: true)
ThemeMyTEnS
Outline
LGNOutlineTextField( titleKey: "Placeholder", text: .constant("Hello"), textFont:Font.LGNTheme.bodyLargeRegular, label: "Title", leftIcon: Image(systemName: "heart"), prefix:LGNContentModel(image: Image(systemName: "heart"), text: "prefix text"), suffix: LGNContentModel(image:Image(systemName: "heart"), text: "suffix text"), defaultBorderColor: Color.LGNTheme.tertiary300,errorBorderColor: Color.LGNTheme.error500, successBorderColor: Color.LGNTheme.success500, focussedBorderColor:Color.LGNTheme.information500, textFontColor: .black ) .state(.error) // success, error, disable, idle, focused.showCaption(caption: LGNContentModel(image: Image(systemName: "heart"), text: "caption text"), showCaption:true)
Inline
LGNInlineTextField( titleKey: "Placeholder", text: .constant("Hello"), textFont: Font.LGNTheme.bodyLargeRegular,label: "Title", leftIcon: Image(systemName: "heart"), prefix: LGNContentModel(image: Image(systemName: "heart"),text: "prefix text"), suffix: LGNContentModel(image: Image(systemName: "heart"), text: "suffix text"),defaultBorderColor: Color.LGNTheme.tertiary300, errorBorderColor: Color.LGNTheme.error500, successBorderColor:Color.LGNTheme.success500, focussedBorderColor: Color.LGNTheme.information500, textFontColor: .black ).state(.success) // success, error, disable, idle, focused .showCaption(caption: LGNContentModel(image:Image(systemName: "heart"), text: "caption text"), showCaption: true)
ThemeIHS
Outline
LGNOutlineTextField( titleKey: "Placeholder", text: .constant("Hello"), textFont:Font.LGNTheme.bodyLargeRegular, label: "Title", leftIcon: Image(systemName: "heart"), prefix:LGNContentModel(image: Image(systemName: "heart"), text: "prefix text"), suffix: LGNContentModel(image:Image(systemName: "heart"), text: "suffix text"), defaultBorderColor: Color.LGNTheme.tertiary300,errorBorderColor: Color.LGNTheme.error500, successBorderColor: Color.LGNTheme.success500, focussedBorderColor:Color.LGNTheme.information500, textFontColor: .black ) .state(.error) // success, error, disable, idle, focused.showCaption(caption: LGNContentModel(image: Image(systemName: "heart"), text: "caption text"), showCaption:true)
Inline
LGNInlineTextField( titleKey: "Placeholder", text: .constant("Hello"), textFont: Font.LGNTheme.bodyLargeRegular,label: "Title", leftIcon: Image(systemName: "heart"), prefix: LGNContentModel(image: Image(systemName: "heart"),text: "prefix text"), suffix: LGNContentModel(image: Image(systemName: "heart"), text: "suffix text"),defaultBorderColor: Color.LGNTheme.tertiary300, errorBorderColor: Color.LGNTheme.error500, successBorderColor:Color.LGNTheme.success500, focussedBorderColor: Color.LGNTheme.information500, textFontColor: .black ).state(.success) // success, error, disable, idle, focused .showCaption(caption: LGNContentModel(image:Image(systemName: "heart"), text: "caption text"), showCaption: true)
ThemeEazy
Outline
LGNOutlineTextField( titleKey: "Placeholder", text: .constant("Hello"), textFont:Font.LGNTheme.bodyLargeRegular, label: "Title", leftIcon: Image(systemName: "heart"), prefix:LGNContentModel(image: Image(systemName: "heart"), text: "prefix text"), suffix: LGNContentModel(image:Image(systemName: "heart"), text: "suffix text"), defaultBorderColor: Color.LGNTheme.tertiary300,errorBorderColor: Color.LGNTheme.error500, successBorderColor: Color.LGNTheme.success500, focussedBorderColor:Color.LGNTheme.information500, textFontColor: .black ) .state(.error) // success, error, disable, idle, focused.showCaption(caption: LGNContentModel(image: Image(systemName: "heart"), text: "caption text"), showCaption:true)
Inline
LGNInlineTextField( titleKey: "Placeholder", text: .constant("Hello"), textFont: Font.LGNTheme.bodyLargeRegular,label: "Title", leftIcon: Image(systemName: "heart"), prefix: LGNContentModel(image: Image(systemName: "heart"),text: "prefix text"), suffix: LGNContentModel(image: Image(systemName: "heart"), text: "suffix text"),defaultBorderColor: Color.LGNTheme.tertiary300, errorBorderColor: Color.LGNTheme.error500, successBorderColor:Color.LGNTheme.success500, focussedBorderColor: Color.LGNTheme.information500, textFontColor: .black ).state(.success) // success, error, disable, idle, focused .showCaption(caption: LGNContentModel(image:Image(systemName: "heart"), text: "caption text"), showCaption: true)
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 |