title | description | author | ms.topic | ms.custom | ms.reviewer | ms.date | ms.subservice | ms.author | search.audienceType | contributors | |||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Label control in Power Apps |
Learn about the details, properties and examples of the label control in Power Apps. |
yogeshgupta698 |
reference |
canvas |
mkaur |
12/08/2021 |
canvas-maker |
yogupt |
|
|
A box that shows data such as text, numbers, dates, or currency.
A label shows data that you specify as a literal string of text, which appears exactly the way you type it, or as a formula that evaluates to a string of text. Labels often appear outside of any other control (such as a banner that identifies a screen), as a label that identifies another control (such as a rating or audio control), or in a gallery to show a specific type of information about an item.
AutoHeight – Set to true to allow the label to auto-grow its height to show all text. Set to false to truncate the text to the height assigned.
Color – The color of text in a control.
Font – The name of the family of fonts in which text appears.
Text – Text that appears on a control or that the user types into a control.
DelayOutput – Set to true to delay action during text input.
Align – The location of text in relation to the horizontal center of its control.
AutoHeight – Whether a label automatically increases its Height property if its Text property contains more characters than the control can show at one time.
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.
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.
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.
FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.
Height – The distance between a control's top and bottom edges.
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.
Live – How a screen reader announces changes to the value of the label's Text property.
- When set to Off, the screen reader doesn't announce changes.
- When set to Polite, the screen reader finishes speaking before announcing any changes that occurred while the screen reader was speaking.
- When set to Assertive, the screen reader interrupts itself to announce any changes that occurred while the screen reader was speaking.
OnSelect – Actions to perform when the user taps or clicks a control.
Overflow – Whether a scrollbar appears in a label if its Wrap property is set to true and the value of the control's Text property contains more characters than the control can show at one time.
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.
Role - The semantic role of the label text, such as Heading 1. Doesn't change the style of the label but makes the output semantically correct for interpretation by screen readers.
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.
VerticalAlign – The location of text on a control in relation to the vertical center of that control.
Visible – Whether a control appears or is hidden.
Width – The distance between a control's left and right edges.
Wrap – Whether the text should ever wrap to multiple lines.
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).
-
Add a label, and set its Text property to "Hello, world" (including the double quotation marks).
Don't know how to add and configure a control?
-
Add a label, and set its Text property to a formula such as this one:
Today()[!NOTE] When you specify a formula, you don't use quotation marks unless an argument of the formula is a literal string. In that case, enclose the argument, not the formula, in double quotation marks.
Want more information about the Today function or other functions?
In this procedure, you'll create a collection, called CityPopulations, that contains data about the population of various cities in Europe. Next, you'll show that data in a gallery that contains three labels, and you'll specify the type of data that each label will show.
-
Add a button, and set its OnSelect property to this formula:
ClearCollect(CityPopulations, {City:"London", Country:"United Kingdom", Population:8615000}, {City:"Berlin", Country:"Germany", Population:3562000}, {City:"Madrid", Country:"Spain", Population:3165000}, {City:"Rome", Country:"Italy", Population:2874000}, {City:"Paris", Country:"France", Population:2273000}, {City:"Hamburg", Country:"Germany", Population:1760000}, {City:"Barcelona", Country:"Spain", Population:1602000}, {City:"Munich", Country:"Germany", Population:1494000}, {City:"Milan", Country:"Italy", Population:1344000}) -
Press F5, select the button, and then press Esc.
-
Add a text gallery, and set its Items property to CityPopulations.
When the gallery is selected, the right pane shows options for that gallery.
-
In the Gallery1 pane, set the top list to Population, set the middle list to City, and set the bottom list to Country.
Despite its name, a Label control does not have to be used as a label for another control. It can be used to display any piece of text.
A Label can be used as a button or link by specifying OnSelect behavior. When used this way, there are similar accessibility considerations as with buttons.
There must be adequate color contrast between:
- Color and Fill
- Other standard color contrast requirements apply (if used as a button or link)
-
Text must be present.
-
Live should be set to Polite or Assertive if a screen reader should announce changes to the value of the Text property.
[!NOTE] Screen readers will treat Labels as buttons when TabIndex is zero or greater.
- Label should look like a link, if it is used as a link.
- Set Underline to true
- HoverColor should be different from Color
- TabIndex must be zero or greater, if the text is used as a button or link. This allows keyboard users to navigate to it.
- Focus indicators must be clearly visible, if the text is used as a button or link. Use FocusedBorderColor and FocusedBorderThickness to achieve this.
[!INCLUDEfooter-include]