Power Apps Text input Control

Are you aware of how to use the Text input control in Power Apps? If No, follow this complete tutorial to understand everything related to Power Apps Text input Control.

Moreover, I will show you the key properties of a Text input control in Power Apps and how to add the Power Apps Text input control.

Also, you will learn how to work with a Power Apps Text input control with simple examples.

Power Apps Text input Control

Power Apps Text-input control is a user-interface control that allows users to enter text, numbers, and other types of data or information.

Its purposes include allowing user input (e.g., during form completion or table searches) and capturing user input (e.g., during form completion or table searches).

Power Apps Text input Control

Power Apps Text input Control Properties

This section will explain the Power Apps Text-input control properties.

AccessibleLabelThis property is assigned to a screen reader label.
AlignThis refers to the horizontal positioning of the text relative to the center of its control.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
ClearWhen the value is “true,” the user input is recorded with a half-second delay. This functionality is useful for deferring computationally expensive operations until the user has completed entering text, such as when filtering data in other formulas.
ColorDefine the color of a text.
DefaultThe value of a control should be displayed before the user makes any changes.
DelayOutputHere, we can specify whether the text input control can be visible.
DisabledBorderColorThe color of a control’s border will be affected when the “DisplayMode” property is set to Disabled.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
EnableSpellCheckThe question is whether to enable the browser’s spell-check functionality for text-input controls. It should be noted that this property is not supported by Power Apps for Windows.
FillDefine the background color of the control.
FocusedBorderColorThe color of a control’s border when it is in focus.
FontSpecify the name of the font family the text should display
FormatWhen the user input is limited to numeric characters only, certain symbols and formats may be approved based on the browser language. It’s important to note that these limitations cannot be adjusted on individual controls.
HintTextThe light-grey text should be displayed within an input-text control when empty.
HoverBorderColorThe color of a control’s border will be affected when the “DisplayMode” property is set to Disabled.
MaxLengthHere, we can limit the maximum number of characters of a text-input control for the user.
ModeYou can specify the control can operate in “SingleLine,” “MultiLine,” or “Password mode.”
OnChangeWhen the user changes a selection, it specifies what action to perform.
OnSelectWhen the user clicks on a control, it specifies what action to perform.
PressedBorderColorThis refers to the color of a control’s border when a user taps or clicks on it.
RadiusBottomRightThis refers to the degree of rounding present in the bottom-right corner of a control.
ResetYou can specify whether a control returns to its original default value.
TabIndexThis refers to the keyboard navigation sequence that is related to other controls.
VirtualKeyboardModeThe light-grey text should be displayed within an input-text control when empty.
VisibleHere, we can specify whether the text-input control can be visible.

These are the properties of a Power Apps Text input control.

How to Add a Power Apps Text input Control

I will show you how to insert a text input control in Power Apps

  • Sign into Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert a Text-input control. [Click on +Insert -> Expand Input -> Select Text-input].
Add Power Apps Text input control
  • The Power Apps Text-input control will appear like the screenshot below.
How to add Power Apps Text input control
  • By default, the Text-input control name will be “TextInput1“; it is always better to provide a meaningful name [you can Rename it using “txt”]
Text input control in Power Apps
  • Save, Publish, and Preview the app. The user can provide the data like text and numbers based on their requirement.
How to add Text input control in Power Apps

This is how we can insert a Power Apps Text input control.

How to Use Power Apps Text input Control

This section will show you how to use Power Apps Text-input control.

Example 1:

I created a Power Apps canvas app and added a Text-input and Dropdown control. When the users provide their name, by default, the dropdown will select their department as shown below:

How to use Power Apps Text input control

Follow the below steps to achieve this:

ClearCollect(
    colUsers,
    {
        'User Name': "Serena",
        'User Department': "HR"
    },
    {
        'User Name': "Blair",
        'User Department': "IT"
    }
);

Where,

  1. colUsers = Provide the Collection Name
  2. User Name, User Department = Collection column name
  3. Serena, HR, Blair, IT = Collection column values
Text input control in Power Apps
  • Click on the App, select the More options (…) -> Then click on Run OnStart to create a collection.
How to work with Text-input control Power Apps
  • On the Power Apps screen, insert a Text-input control -> Set its HintText property to:
"Provide Your Name"
How to use Power Apps Text input control
  • Insert a Dropdown control -> Set its Items property to:
Distinct(
    colUsers,
    'User Department'
)

Where,

  1. colUsers = Collection Name
  2. User Department = Collection column name
How to work with Power Apps Text input control
  • Select a Dropdown control -> Set its Default property to:
LookUp(
    colUsers,
    'User Name' = txt_UserName.Text
).'User Department'

Where,

  1. colUsers = Collection Name
  2. User Name, User Department = Collection column name
  3. txt_UserName = Text-input control name
Power Apps Text input control
  • Once your app is ready, SavePublish, and Preview the app. When the user provides their name, their department will be selected by default.
Power Apps Text input Control

This is how to work with Power Apps Text-input control.

Example 2:

I added a Text input and Text label control on the Power Apps screen. I have changed the text input mode to “Password mode.” Whatever the user provides the password, that will be displayed on the text label.

Text input control Power Apps

Let me show you how to achieve this:

  • On the Power Apps screen, insert a Text-input control -> Set the Mode property to:
TextMode.Password
How to use Text input control in Power Apps
  • Insert a Text label control -> Set its Text property to:
txt_Password.Text

Where,

  1. txt_Password = Text-input control name
How to work with Text input control in Power Apps
  • SavePublish, and Preview the app when the user provides the password in the text-input control that will be displayed on a text label control.
PowerApps Text input control

This is how to work with a Power Apps Text input control.

Conclusion

I hope this Power Apps tutorial gave you complete information about Power Apps Text input Control and its key properties.

Additionally, you have learned how to add the Power Apps Text input control and use a Text input control with various examples in Power Apps.

Furthermore, you may like some more Power Apps tutorials: