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.

We have basic types of textfield:

  1. Basic Text Field
  2. Basic Text Field Outline
  3. Text Field With Label inline
  4. Text Field With Label Outline

and then states of textfield:

  1. Normal State Inline
  2. Normal State Outline
  3. Error State Inline
  4. Error State Outline
  5. Success State Inline
  6. Succes State Outline
  7. Disable State Inline
  8. Disable State Outline

You can also implement prefix and suffix for your project.

For textfield customization:

  1. Prefix Text Inline
  2. Prefix Text Outline
  3. Suffix Text Inline
  4. Suffix Text Outline
  5. Left Icon Inline Text Field
  6. Left Icon Outline Text Field
  7. Right Icon Inline Text Field
  8. Right Icon Outline Text Field
Legion Textfield Android Compose

Usage

Basic

Textfield Inline

var value by remember { mutableStateOf("") }


LgnInlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username"
)

Textfield Outline

var value by remember { mutableStateOf("") }


LgnOutlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username"
)

With Label

Textfield with Inline Label

var value by remember { mutableStateOf("") }


LgnFieldContainer(label = "Username") {
    LgnInlineTextField(
        value = value,
        onValueChange = {
            value = it
        },
        placeholder = "Username",

Textfield with Outline Label

var value by remember { mutableStateOf("") }


LgnFieldContainer(label = "Username") {
    LgnOutlineTextField(
        value = value,
        onValueChange = {
            value = it
        },
        placeholder = "Username",

State

Normal State Inline Textfield

var value by remember { mutableStateOf("") }


LgnFieldContainer(label = "Username") {
    LgnInlineTextField(
        value = value,
        onValueChange = {
            value = it
        },
        placeholder = "Username",

Normal State Outline Textfield

var value by remember { mutableStateOf("") }


LgnFieldContainer(label = "Username") {
    LgnOutlineTextField(
        value = value,
        onValueChange = {
            value = it
        },
        placeholder = "Username",

Error State Inline Textfield

var value by remember { mutableStateOf("") }


LgnFieldContainer(label = "Username", error = "Username Error") {
    LgnInlineTextField(
        value = value,
        onValueChange = {
            value = it
        },
        placeholder = "Username",

Error State Outline Textfield

var value by remember { mutableStateOf("") }


LgnFieldContainer(label = "Username", error = "Username Error") {
    LgnOutlineTextField(
        value = value,
        onValueChange = {
            value = it
        },
        placeholder = "Username",

Success State Inline Textfield

var value by remember { mutableStateOf("") }


LgnFieldContainer(label = "Username", success = "Username Correct") {
    LgnInlineTextField(
        value = value,
        onValueChange = {
            value = it
        },
        placeholder = "Username",

Success State Outline Textfield

var value by remember { mutableStateOf("") }


LgnFieldContainer(label = "Username", success = "Username Correct") {
    LgnOutlineTextField(
        value = value,
        onValueChange = {
            value = it
        },
        placeholder = "Username",

Disabled State Inline Textfield

var value by remember { mutableStateOf("") }


LgnInlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username",
    singleLine = false,

Disabled State Outline Textfield

var value by remember { mutableStateOf("") }


LgnOutlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username",
    singleLine = false,

Prefix Text

Prefix Inline Textfield

var value by remember { mutableStateOf("") }


LgnInlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username",
    prefix = {

Prefix Outline Textfield

var value by remember { mutableStateOf("") }


LgnOutlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username",
    prefix = {

Suffix Text

Suffix Inline Textfield

var value by remember { mutableStateOf("") }


LgnInlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username",
    suffix = {

Suffix Outline Textfield

var value by remember { mutableStateOf("") }


LgnOutlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username",
    suffix = {

Left Icon

Left Icon Inline Textfield

var value by remember { mutableStateOf("") }


LgnInlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username",
    iconLeft = {

Left Icon Outline Textfield

var value by remember { mutableStateOf("") }


LgnOutlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username",
    iconLeft = {

Right Icon

Right Icon Inline Textfield

var value by remember { mutableStateOf("") }


LgnInlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username",
    iconRight = {

Right Icon Outline Textfield

var value by remember { mutableStateOf("") }


LgnOutlineTextField(
    value = value,
    onValueChange = {
        value = it
    },
    placeholder = "Username",
    iconRight = {

Attributes

ParametersTypeDescription
valueStringSet Text in Field
onValueChange(String) -> UnitSet Action When Text Change
colorsLgnTextFieldColorsSet Color of Text
textStyleTextStyleSet Text Style
enabledBooleanSet Enable or Disable of Text Field
errorBooleanSet whether Text Field State Error or Not
successBooleanSet whether Text Field State Success or Not
iconLeft@Composable (() -> Unit)?Set Icon Left of Text Field
iconRight@Composable (() -> Unit)?Set Icon Right of Text Field
prefix@Composable (() -> Unit)?Set Prefix of Text Field
suffix@Composable (() -> Unit)?Set Suffix of Text Field
shapeShapeSet Shape of Text Field
placeHolderStringSet Place Holder of Text Field
keyboardOptionsKeyboardOptionsSet Options Available on the Keyboard when They Appear on the Screen
keyboardActionsKeyboardOptionsWhat the Application Should Do after the User has Finished Entering Text
singleLineBooleanSet The Text Field Whether Single Line or Not
maxLinesIntSet Maximum Line of Text Field
minLinesIntSet Minimum Line of Text Field
visualTransformationVisualTransformationChanging Visual Output of the Text Field