Google Material Design Text Input Component

A few months ago, I had shared a revamped text input control inspired by Google's Material Design. I presented this, for the first time, to an audience on April's session (recording can be found here) for the Houston Power Apps and Power Automate User Group. The three controls I presented during the session were - text input, tooltip, and floating action button.

One of the feedback I got was to convert each of these control into a component to make them reusable. The first one I picked up (it just so happened to be in the order in which I had started off with revamping these controls!) was the text input control. I have started to love components (the first one was the date picker component - also v3 coming out soon!)

I wanted to provide all the properties an out-of-the-box text input control has. So here is a list of all the properties available:

1. PrimartTextAlign
2. PrimaryTextDisplayMode
3. PrimaryFontColor
4. PrimaryFontType
5. PrimaryTextFontWeight
6. PrimaryTextFormat
7. PrimaryTextItalic
8. PrimaryTextMode
9. PrimaryTextInFocusTopPadding
10. PrimaryTextOutFocusTopPadding
11. PrimaryTextSize
12. PrimaryTextStrikethrough
13. PrimaryTextUnderline
14. SecondaryTextAlign
15. SecondaryFontColor
16. SecondaryFontType
17. SecondaryTextFontWeight
18. SecondaryTextHeight
19. SecondryTextItalic
20. SecondaryTextSize
21. SecondaryTextStrikethrough
22. SecondaryTextUnderline
23. EnableSpellCheck
24. HintText
25. LineHeight
26. Reset
27. TextFillColor
28. ToolTip
29. VirtualKeyboardMode
30. FocusBarInFocusColor
31. FocusBarOutFocusColor
32. FocusBarHeight
33. GoogleStandardVisiblity

All of them are pretty self explanatory except for the last one. That variable controls the visibility of a text input control that displays Google Material Design standards for some of these properties. It also provides suggestions for the other properties. Start off with a component size that is big enough to display this text input control and then once you have gone through all the properties, set the Width and Height of the component based on the suggestion. Once you are done with the suggestions, set the GoogleStandardVisibility to false and the instructions will go away.

This is how the suggestions are structured:

Google Design Standards:
-----------------------------
Height = 90
Width = 560
PrimaryTextInFocusTopPadding = 10
PrimaryTextOutFocusTopPadding = 5
PrimaryTextSize = 20
SecondaryFontColor = RGBA(56, 96, 178, 1)
SecondaryTextFontWeight = Semibold
SecondaryTextHeight = 32
SecondaryTextSize = 15
TextFillColor = RGBA(230, 230, 230, 1)
FocusBarInFocusColor = RGBA(56, 96, 178, 1)
FocusBarOutFocusColor = ColorFade(Gray, 0.5)
FocusBarHeight = 5

Other Defaults
-----------------
PrimartTextAlign = Align.Left
PrimaryTextDisplayMode = DisplayMode.Edit
PrimaryFontColor = Black
PrimartFontType = desired font type
PrimaryTextFontWeight = FontWeight.Normal
PrimartTextFormat = TextFormat.Text
PrimaryTextItalic = false
PrimaryTextMode = TextMode.SingleLine
PrimaryTextStrikethrough = false
PrimaryTextUnderline = false
SecondaryTextAlign = Align.Left
SecondaryFontType = desired font type
SecondryTextItalic = false
SecondaryTextStrikethrough = false
SecondaryTextUnderline = false
EnableSpellCheck = false
HintText = desired hint text
LineHeight = 1.2
Reset = false
Tooltip = desired tooltip
VirtualKeyboardMode = VirtualKeyboardMode.Text
GoogleStandardVisiblity = true to read these instructions

One other step is needed to make this component work as desired is to add a piece of code wherever you want the user to click to be able to hide the secondary text if there is no text in the primary text input control. In my example, I have added a label and pushed it to the back so its behind all other controls. I have them set it's OnSelect property to the following code:

Reset(Component_GoogleTextInput)

I have added 2 components and set them up with different font properties. With the rest of the settings configured as listed above, the component behaves as shown below:

You can find the component here. Download it and enjoy a text input control inspired by Google Material Design in your apps!

Have fun! Get addicted!