Power Apps Toggle Control [How to Use]

Have you ever had a requirement to work with a Power Apps Toggle control and are facing difficulties using it? Then, don’t worry.

This Microsoft Power Apps tutorial will help you understand how to use Power Apps toggle control with various examples.

Moreover, I will explain what are the properties of Powe Apps toggle control and many more like:

  • How to add a Power Apps toggle control
  • How to use Power Apps Toggle with SharePoint List

Power Apps Toggle Control

The Power Apps toggle control is used as a switch control in Power Apps, where the users can quickly turn it on or off by moving its handle.

The PowerApps Toggle control operates similarly to a checkbox.

Enabling the “ShowLabel” option to “true” so that users can quickly determine the toggle value.

Power Apps toggle value

This is the overview of the Power Apps Toggle control.

Power Apps Toggle Control Properties

Here, I will explain the properties of Power Apps toggle control.

Property NameDescription
AccessibleLabelThis property is assigned to a screen reader label.
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”].
DefaultWhen the user opens the app, we can specify the value to be yes or no.
DisabledBorderColorWhen the DisplayMode property of the control is set to Disabled, it indicates a color for the control’s border.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
FalseFillWhen the toggle switch control is in the off position, it fills with color.
FalseHoverFillWhen the Toggle switch control is turned off, the toggle hover gets filled with color.
FalseTextThe text to display when the toggle is turned off.
HandleFillWe can provide the color to the toggle handle.
OnChangeWhen the user changes a value, it specifies what action to perform.
OnCheckOnce the toggle value changes to true, it determines the app’s response.
OnSelectWhen the user clicks on a control, it specifies what action to perform.
OnUncheckOnce the toggle value changes to false, it determines the app’s response.
ResetResetting the controls to their default value can be beneficial.
TrueFillWhen the toggle is switched on, the color is filled.
TrueHoverFillIf the toggle switch is activated, the toggle hover will be filled with color
TrueTextDisplaying the text value while the toggle switch is on.
VisibleHere, we can specify whether the toggle control can be visible.

These are the properties of a Power Apps toggle control.

How to Add Power Apps Toggle Control

Here, I will show you how to insert a toggle 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 Toggle control.[Click on +Insert -> Expand Input -> Select Toggle].
Power Apps toggle control
  • By default, the toggle control name will be “Toggle1“; you can Rename it using “tgl” based on your requirement.
Power Apps toggle control properties

This is how we can insert a Power Apps toggle control.

How to Use Toggle Control in Power Apps

This section will show you how to use a Power Apps toggle control.

Example:

I will display the text label based on the toggle switch set to On or Off. When the toggle is turned On, the label displays Approved; when turned Off, it shows Not Approved.

How to use Power Apps toggle control

Follow the below steps to achieve this:

  • On the Power Apps screen, insert the Toggle control and set its properties as shown below:
TrueText = "On"
FalseText = "Off"
How to add Power Apps toggle control
  • Now, I will rename the toggle switch to “tgl_IsApproval” as shown below:
Add Power Apps toggle control
  • Insert a Text label -> Set its Text property to the code below:
If(
    tgl_IsApproval.Value = true,
    "Approved",
    "Not Approved"
)

Where,

  1. tgl_IsApproval = Toggle control name
  2. Approved = To display this text when the toggle switch is On
  3. Not Approved = To display this text when the toggle switch is Off
Toggle control in Power Apps
  • Once the app is ready, SavePublish, and Preview the app. The text label will display based on the toggle switch set to On or Off.
How to use toggle control in Power Apps

This is how we can use the Power Apps toggle control.

How to Use Power Apps Toggle With SharePoint List

In this example, I will show you how to save the Power Apps toggle value to the SharePoint list.

For Example, I have a SharePoint list [Product List] that has various columns like:

Column NameData Type
ProductTitle
Product Is AvailableYes/no
PowerApps Toggle using SharePoint List

On my Power Apps screen, I have added an Edit form connected to the above SharePoint list. The form contains the Toggle control, connected to the SharePoint list “Yes/no” column [Product Is Available].

Later, I added a Button control to the Power Apps form below. When a user toggles the value to Yes/No using the toggle control and clicks the [Submit] button, the data is saved in the SharePoint list.

PowerApps Toggle SharePoint List

The provided data will be displayed on the SharePoint list.

How to use the PowerApps Toggle SharePoint List

Follow the below steps to achieve it:

  • On the Power Apps screen, insert an Edit form. Then, add a new data source for the above SharePoint list and set the Edit form’s Data source property:
'Product Details'

Where,

  • Product Details = SharePoint list name
Power Apps Toggle Yes or No
  • Insert a Button control -> Set its OnSelect property to:
Patch(
    'Product List',
    Defaults('Product List'),
    {
        Title: DataCardValue3.Text,
        'Product Is Available': DataCardValue8.Value
    }
)

Where,

  1. Product Details = SharePoint list name
  2. Title = SharePoint list title column
  3. DataCardValue3 = Text-input control name
  4. Product Is Available = SharePoint list yes/no column name.
  5. DataCardValue8 = Toggle control name
How to use toggle with SharePoint list in Power Apps
  • Once the app is ready, SavePublish, and Preview the app whenever the user switches the value to Yes/No using the toggle control and clicks the button [Submit].
Use Power Apps toggle with SharePoint List

The provided data will be displayed on the SharePoint list.

I achieved this by saving the Power Apps toggle control value to SharePoint.

Conclusion

This Microsoft Power Apps tutorial taught us everything about “Power Apps Toggle Control.”

Lastly, I have explained about what are the properties of Powe Apps toggle control and many more:

  • How to add Power Apps toggle control
  • How to use toggle control in Power Apps
  • How to work Power Apps Toggle with SharePoint List

Also, you may like some more Power Apps articles: