Use Fluent UI controls

Creating apps that look great in Microsoft Teams will be easier with our new components. Built on the Fluent UI framework, the new components will look great with Teams styles and will automatically adjust to the Teams default theme. The new controls are Button, Check box, Combo box, Date picker, Label, Radio group, Rating, Slider, Text box, and Toggle.

Let's take a look at each Fluent UI control and its most useful properties. For a complete list of controls and properties in Power Apps, go to Controls and properties in Power Apps.

A control that the user can select to interact with the app.

Configure the OnSelect property of a Button control to run one or more formulas when the user selects the control.

ButtonType – The style of button to show, Standard, or Primary. Default value: Standard.

OnSelect – How the app responds when the user selects a control.

Text – Text that appears on a control or that the user enters into a control.

A control that the user can select or clear to set its value to true or false.

The user can specify a Boolean value by using this familiar control, which has been widely used in the user interface.

Box side – The side of the control on which the check box is displayed.

Label – Text that appears on a control.

Checked – Whether the control is checked or not.

A control that allows users to make selections from provided choices. Supports search and multiple selections.

A Combo box control allows a user to search for items to select.

Single-select or multiple-select mode is configured via the SelectMultiple property.

Items – The source of data from which selections can be made.

DefaultSelectedItems – The items that are initially selected before the user interacts with the control.

SelectMultiple – Whether the user can select a single item or multiple items.

IsSearchable – Whether the user can search for items before selecting.

A control that the user can select to specify a date.

If you add a Date picker control instead of a text input control, you help ensure that the user specifies a date in the correct format.

Value – The date currently selected in a date control. This date is represented in local time.

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 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.

Color – The color of text in a control.

Font – The name of the family of fonts in which text appears.

Text – The text that appears on a control.

An input control that shows multiple options, only one of which users can select at a time.

A Radio group control, a standard HTML input control, is best used with only a few, mutually exclusive options.

Items – The source of data that appears in a control such as a gallery, a list, or a chart.

Selected – The data record that represents the selected item.

A control with which users can indicate a value from 0 through a maximum number that you specify.

In this control, the user can indicate, for example, how much they liked something by selecting a certain number of stars.

Value – The initial value of a control before it's changed by the user.

Max – The maximum value to which the user can set a slider or a rating.

A control with which the user can specify a value by dragging a handle.

The user can indicate a value, between a minimum and a maximum value that you specify, by dragging the handle of a slider left to right or up and down, depending on the direction that you choose.

Max – The maximum value to which the user can set a slider or a rating.

Min – The minimum value to which the user can set a slider.

Value – The value of an input control.

Layout – Whether a control is displayed horizontally or vertically.

Show value – Whether a control should display the value.

A box in which the user can enter text, numbers, and other data.

The user can specify data by typing into a Text box 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.

Font – The name of the family of fonts in which text appears.

Text – Text that appears on a control or that the user enters into a control.

A control that the user can turn on or off by moving its handle.

A Toggle control is designed for the modern user interface, but behaves the same way as a check box.

Checked – Whether the control is checked or not.

OffText – The text of the off state.

OnText – The text of the on state.

Properties of controls have been simplified for the ease of use. The following table lists differences between Fluent UI controls and classic control property names.

Create additional apps
Understand Power Apps Studio