Text input control in Power Apps
A box in which the user can type text, numbers, and other data.
Description
The user can specify data by typing into a text-input control. Depending on how you configure the app, that data might be added to a data source, used to calculate a temporary value, or incorporated in some other way.
Key properties
Default – The initial value of a control before it is changed by the user.
Text – Text that appears on a control or that the user types into a control.
Additional properties
AccessibleLabel – Label for screen readers.
Align – The location of text in relation to the horizontal center of its control.
BorderColor – The color of a control's border.
BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.
BorderThickness – The thickness of a control's border.
Clear – Whether a text-input control shows an "X" that the user can tap or click to clear the contents of that control. Only works in SingleLine mode.
Color – The color of text in a control.
DelayOutput – When set to true, user input is registered after half a second delay. Useful for delaying expensive operations until user completes inputting text (i.e. for filtering when input is used in other formulas).
DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.
DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.
DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.
EnableSpellCheck – Whether a text-input control should use the browser spell check function. Power Apps for Windows doesn't support this property.
Fill – The background color of a control.
FocusedBorderColor – The color of a control's border when the control is focused.
FocusedBorderThickness – The thickness of a control's border when the control is focused.
Font – The name of the family of fonts in which text appears.
FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.
Format – Whether the user input is restricted to numbers only or can be any text. When set to Number, only digits and certain numeric symbols can be entered. Supported symbols and formats depend on the browser language and cannot be set on individual controls.
Height – The distance between a control's top and bottom edges.
HintText – Light-grey text that appears in an input-text control if it's empty.
HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.
HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.
HoverFill – The background color of a control when the user keeps the mouse pointer on it.
Italic – Whether the text in a control is italic.
LineHeight – The distance between, for example, lines of text or items in a list.
MaxLength – The number of characters that the user can type into a text-input control.
Mode – The control is in SingleLine, MultiLine, or Password mode.
OnChange – Actions to perform when the user changes the value of a control (for example, by adjusting a slider).
OnSelect – Actions to perform when the user taps or clicks a control.
PaddingBottom – The distance between text in a control and the bottom edge of that control.
PaddingLeft – The distance between text in a control and the left edge of that control.
PaddingRight – The distance between text in a control and the right edge of that control.
PaddingTop – The distance between text in a control and the top edge of that control.
PressedBorderColor – The color of a control's border when the user taps or clicks that control.
PressedColor – The color of text in a control when the user taps or clicks that control.
PressedFill – The background color of a control when the user taps or clicks that control.
RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.
RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.
RadiusTopLeft – The degree to which the top-left corner of a control is rounded.
RadiusTopRight – The degree to which the top-right corner of a control is rounded.
Reset – Whether a control reverts to its default value.
Size – The font size of the text that appears on a control.
Strikethrough – Whether a line appears through the text that appears on a control.
TabIndex – Keyboard navigation order in relation to other controls.
Tooltip – Explanatory text that appears when the user hovers over a control.
Underline – Whether a line appears under the text that appears on a control.
VirtualKeyboardMode – Type of virtual keyboard, text or numeric, that appears on an app user's touch screen. The Format property determines the default value. Device support varies. Devices that are running iOS must have at least version 12.2. The recommended version of Android is 9.0, and capabilities of numeric keyboards vary for Android devices. Windows 10 doesn't support this property.
Visible – Whether a control appears or is hidden.
Width – The distance between a control's left and right edges.
X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).
Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).
Related functions
Examples
Collect data
Add two text-input controls, and name them inputFirst and inputLast.
Don't know how to add, name, and configure a control?
Add a button, set its Text property to Add, and set its OnSelect property to this formula:
Collect(Names, {FirstName:inputFirst.Text, LastName:inputLast.Text})Want more information about the Collect function or other functions?
Add a text gallery in portrait/vertical orientation, set its Items property to Names, and set the Text property of Subtitle1 to ThisItem.FirstName.
(optional) In the template gallery, delete the bottom label, named Body1, and set the TemplateSize property of the gallery to 80.
Press F5, type a string of text into inputFirst and inputLast, and then click or tap the Add button.
(optional) Add more names to the collection, and then press Esc to return to the default workspace.
Prompt for a password
Add a text-input control, name it inputPassword, and set its Mode property to Password.
Add a label, and set its Text property to this formula:
If(inputPassword.Text = "P@ssw0rd", "Access granted", "Access denied")Want more information about the If function or other functions?
Press F5, and then type P@ssw0rd in inputPassword.
When you finish typing the password, the label stops showing Access denied and starts to show Access granted.
To return to the default workspace, press Esc.
(optional) Add a control such as an arrow, configure it to navigate to another screen, and show it only after the user types the password.
(optional) Add a button, configure its Text property to show Sign in, add a timer, and disable the input-text control for a certain amount of time if the user types the wrong password and then clicks or taps the Sign in button.
Accessibility guidelines
Color contrast
Screen reader support
- AccessibleLabel must be present.
Keyboard support
- TabIndex must be zero or greater so that keyboard users can navigate to it.
- Focus indicators must be clearly visible. Use FocusedBorderColor and FocusedBorderThickness to achieve this.