Canvas Apps UI

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:

Google Material Design as a component (click to enlarge)

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!

1 thought on “Google Material Design Text Input Component”

Leave a Reply