TextField in KMP KMM Kotlin Compose Multiplatform

In today’s tutorial, we will learn about TextField in KMP KMM Kotlin Compose Multiplatform for both Android & iOS platforms. TextField is known as EditText in native Android, and in React native, it is known as the TextInput component.

TextField in KMP KMM Kotlin Compose Multiplatform:

TextField is a UI component in KMP that takes user input. In Kotlin’s Multiplatform, there are three types of TextField widgets in KMP: BasicTextField, TextField, and OutlinedTextField. With the combination of different properties on OutlinedTextField, we can make Password TextField and TextField with leading and trialing material icons. Our main purpose in this tutorial is to explain each type of TextField widget and show the TextField entered value in the Text widget on the button click event.

1. BasicTextField:

The BasicTextField widget is the core TextField widget, and you can apply and modify it using your styles.

Code explanation:

• value: Here, we would pass a Mutable state variable. So its value can be updated while the user types.
• onValueChange: This method calls when each character is typed inside the TextField, So we store its value inside the mutable state.
• modifier: To apply different styles like width, height, padding, and border on TextField. If you want to learn more about Modifier properties, read this tutorial.

Source code:

Screenshot:

2. TextField:

The TextField component creates background color-filled Text input in Kotlin compose multiplatform.

Note: All the definitions of properties are the same as those mentioned above. Just background is used to set the background color to TextField.

Source code:

Screenshot:

3. OutlinedTextField:

Outlined TextField is used to create bordered material style Text Field in KMP. It renders with a default border, and we can modify it further.

Screenshot:

4. Password TextField:

There is a property PasswordVisualTransformation(), which hides the TextField inside the typed text and shows stars in its place.

Screenshot:

5. TextField with Icons:

In Kotlin Compose Multiplatform, we can add material vector icons in the TextField component. We can add icons at the start of TextField, called leading icons, and at the end of the TextField, called trailing icons.

Screenshot:

6. Custome TextField with Reusable component:

After reading all the TextField widget code, I created a custom component for TextFiled, which you can use in your projects. Bypassing the right argument, you can achieve any styling option.

Source Code:

Code explanation:

1. isFocused State: To detect whether or not selected TextField is selected.
2. label: Render the label of the TextField widget.
3. leadingIcon: Show an icon at the start of TextField.
4. trailingIcon: Show an icon at the end of textField.
5. value: Typed value inside of a TextField.
6. onValueChange: Calls every time the user types something inside a TextField.
7. placeholder: Hint text.
8. Modifier: To set View properties on TextField.
9. RoundedCornerShape: Make the TextFiled corner border rouned.
10. PasswordVisualTransformation(): Show TextFiled text as input type Password.
11. backgroundColor: To set the background color of TextField.
12. focusedBorderColor: This will be the border color after focusing or selecting the TextField.
13. unfocusedBorderColor: After unfocusing on the TextFiled, this will be the border color.
14. placeholderColor: TextField placeholder color.
15. unfocusedLabelColor: After unfocusing the TextField, this would be Text color.
16. focusedLabelColor: When the user focuses the TextField, this will be the focused label color.
17. textColor: TextFiled inside typed text color(Text widget).
18. cursorColor: TextField blinking cursor color.
19. disabledPlaceholderColor: When TextField is disabled, then it is the placeholder color.
20. singleLine: Make the TextField only single line enabled.
21. isError: Handle errors in TextField.

Complete source code for App.kt file:

Output: