Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Textfield

Used to enter spesific text input form

banner-Textfield
Component Status Details

Status component contains a list of checks and completeness that has been tested and owned by each component

check-list-icon We don't use color as the only visual tool to convey information.
check-list-icon The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.check-list-icon The title is the component name that uses the frame base component template.check-list-icon The base component name contains: .Base & "Component Name" if there is more than one.check-list-icon All component properties use the Legion foundation.
check-list-icon We can change all the parts that are connected to the component base.check-list-icon The inside of the base component remains connected to the master component.check-list-icon All variant options are not damaged when we change from one to another.check-list-icon Overriding changes to components will not reset other variants.
check-list-icon Component's already has component specs documentation.

Status

Resources

Upcoming

Textfields allow user input. The border should light up simply and clearly indicating which field the user is currently editing.

Legion has 5 basic types of textfield:

  1. Basic Text Field
  2. Text Field with Label
  3. Text Field with Helper
  4. Required Text Field
  5. Optional Text Field

Legion has 5 states of textfield:

  1. State Normal
  2. Error State
  3. Success State
  4. Disable State
  5. Locked State

You can also implement prefix and suffix for your project.

For textfield customization, Legion provides 6 types of icon for the textfield:

  1. Left Icon
  2. Right Icon
  3. Prefix with Left Icon
  4. Prefix with Right Icon
  5. Suffix with Left Icon
  6. Suffix with Right Icon

And also Legion has 5 variants :

  1. Password Field
  2. Date Field
  3. Time Field
  4. Dropdown Field
  5. Unit Field
Legion Textfield in Android XML

Usage

Basic text field

Static in Xml

<com.telkom.legion.component.edittext.LgnEditText
// define your attribute's here
... />

Programatically

...
LgnEditText(requireContext()).apply {
// Your View's customization here
}
...


Text Field with Label

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
android:hint="Email"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
hint = "Email"
}
...


Text Field with Helper

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:helperText="Masukkan email kamu!"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
helper = "Masukkan email kamu"
}
...


Required Text Field

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:isRequired="true"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
isRequired = true
}
...


Optional Text Field

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:isOptional="true"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
isOptional = true
}
...


State Normal

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
// define your attribute's here
... />

Programatically

...
LgnSingleField(requireContext()).apply {
//Your View's customization here
}
...


Error State

Programatically

...
LgnSingleField(requireContext()).apply {
error = "Email sudah digunakan!"
}
...


Success State

Programatically

...
LgnSingleField(requireContext()).apply {
succcess = "Email dapat digunakan!"
}
...


Disable State

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
android:enabled="false"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
isEnabled = true
}
...


Locked State

Programatically

...
LgnSingleField(requireContext()).apply {
isLocked = true
}
...


Prefix Text

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:prefixText="Email"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
prefixText = "email"
}
...


Suffix Text

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:suffixText="\@telkom.co.id"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
suffixText = "email"
}
...


Left Icon

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:startIconDrawable="@drawable/ic_calendar"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
startIconDrawable = ContextCompat.getDrawable(requireContext(), R.drawable.ic_calendar)
}
...


Right Icon

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:endIconDrawable="@drawable/ic_calendar"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
endIconDrawable = ContextCompat.getDrawable(requireContext(), R.drawable.ic_calendar)
}
...


Prefix with Left Icon

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:prefixStartIconDrawable="@drawable/ic_calendar"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
prefixStartIconDrawable = ContextCompat.getDrawable(requireContext(), R.drawable.ic_calendar)
}
...


Prefix with Right Icon

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:prefixEndIconDrawable="@drawable/ic_calendar"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
prefixEndIconDrawable = ContextCompat.getDrawable(requireContext(), R.drawable.ic_calendar)
}
...


Suffix with Left Icon

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:suffixStartIconDrawable="@drawable/ic_calendar"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
suffixStartIconDrawable = ContextCompat.getDrawable(requireContext(), R.drawable.ic_calendar)
}
...


Suffix with Right Icon

Static in Xml

<com.telkom.legion.component.textfield.LgnSingleField
...
app:suffixEndIconDrawable="@drawable/ic_calendar"
...
/>

Programatically

...
LgnSingleField(requireContext()).apply {
suffixEndIconDrawable = ContextCompat.getDrawable(requireContext(), R.drawable.ic_calendar)
}
...


Password Field

Static in Xml

<com.telkom.legion.component.textfield.LgnPasswordField
// define your attribute's here
... />

Programatically

...
LgnPasswordField(requireContext()).apply {
// Your View's customization here
}
...


Date Field

Static in Xml

<com.telkom.legion.component.textfield.LgnCalendarField
...
app:dateFormat="FULL_DATE"
...
/>

Programatically

...
LgnCalendarField(requireContext()).apply {
dateFormat = DateFormat.DEFAULT_DATE
}
...


Time Field

Static in Xml

<com.telkom.legion.component.textfield.LgnTimeField
// define your attribute's here
... />

Programatically

...
LgnTimeField(requireContext()).apply {
// Your View's customization here
}
...


To use dropdown, first define widget or component in your xml.

<com.telkom.legion.component.textfield.LgnDropdownField
// define your attribute's here
... />

And then put dropdown items in your code.

...
etDropDown.addAll(items)
...


Unit Field

To use Unit Field, first define widget or component in your xml.

<com.telkom.legion.component.textfield.LgnSingleUnitField
// define your attribute's here
... />

And then put dropdown items in your code.

...
etUnit.addAll(items)
...

Attributes

Attribute NameXml AttrsRelated method(s)Description
Hintandroid:hinttextTo show hint on textfield
Placeholder textapp:placeholderTextplaceHolderTo show placeholder on textfield
Helper textapp:helperTexthelperTo show helper text directly via xml
Digitsapp:digitsN/ATo show digit number on textfield
Input Type ¹android:inputTypeinputTypeTo set input type on text field directly via xml
Enable Statusandroid:enabledisEnableTo set enable or disable text area directly via xml
Required Statusapp:isRequiredisRequiredTo set required status on text area directly via xml
Optional Statusapp:isOptionalisOptionalTo set optional status on text area directly via xml
Suffix Text ¹app:suffixTextsuffixTextTo set suffix text on text field
Prefix Text ¹app:prefixTextprefixTextTo set prefix text on text field
Override Dropdown Behaviour ⁴ ⁵app:overrideDropdownoverrideDropdownTo override default behaviour of dropdown
Prefix End Icon Drawable ¹app:prefixEndIconDrawableprefixEndIconDrawableTo set icon on behind text prefix on text field directly via xml
Prefix Start Icon Drawable ¹app:prefixStartIconDrawableprefixStartIconDrawableTo set icon on front text prefix on text field directly via xml
Suffix End Icon Drawable ¹app:suffixEndIconDrawablesuffixEndIconDrawableTo set icon on behind text suffix on text field directly via xml
Suffix Start Icon Drawable ¹app:suffixStartIconDrawablesuffixStartIconDrawableTo set icon on front text suffix on text field directly via xml
Ellipsize Placement ¹android:ellipsizeellipsizeTo set where Ellipsize on text field directly via xml
Max Lines ¹android:maxLinesmaxLinesTo set maximum lines on text field directly via xml
Max Length ¹android:maxLengthmaxLengthTo set max length on text field directly via xml
Locked Field ¹N/AisLockedTo set locked field on LgnSingleField
Get Edit Text InstanceN/AeditTextTo get edit text instance from component
Add Values ⁴ ⁵N/AaddAll(List<String>)To set list of string to dropdown on component
Add Click Listener ⁴ ⁵N/AsetOnClickListenerTo set click listener on dropdown if you want override default behaviour
Add Dropdown Listener ⁴N/AsetListenerTo set listener on dropdown when value changed
Add Unit Listener ⁵N/AsetOnUnitListenerTo set listener on dropdown on unit field when value changed
Get Selected Unit Value ⁵N/AunitTo get selected unit on unit field
Get Edit Text on Dropdown Field Instance ⁵N/AdropDownTo get edittext on dropdown field instance on unit field
Set Error StateN/AisErrorTo set text field to error state
Set Error MessageN/AerrorTo set message on error state on text field, if you set error message, text field will automaticly configure to error state