How to Use Power Apps Toggle Control + Examples

In this Power Apps tutorial, I will explain the Power Apps Toggle control, its key properties, and how to use it with examples.

We will also discuss how to save a Power Apps toggle value in a SharePoint list and how to change the toggle to a radio button control.

Power Apps Toggle Control

In Power Apps, the toggle control is used as a switch. Users can quickly turn it on or off by moving its handle. A PowerApps Toggle control operates similarly to a checkbox.

Enabling the “ShowLabel” option to “true” so that users can quickly determine the 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.

These are the properties of a Power Apps toggle control.

Add Power Apps Toggle Control

Here, I will show you how to insert a toggle control in the Power Apps canvas app:

• On the Power Apps screen, insert a Toggle control.[Click on +Insert -> Expand Input -> Select Toggle].

• By default, the toggle control name will be “Toggle1“; you can Rename it using “tgl” based on your requirement.

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

How to Use Power Apps Toggle Control

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.

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"

• Now, I will rename the toggle switch to “tgl_IsApproval” as shown below:

• 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

• Once the app is ready, Save, Publish, and Preview the app. The text label will display based on the toggle switch set to On or Off.

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

Save Power Apps Toggle Value in a 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:

On my Power Apps screen, I have added an Edit form connected to the above SharePoint list. The form contains the Toggle control, which is 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.

The provided data will be displayed on the 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

• 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

• Once the app is ready, save, Publish, and Preview it. Whenever the user switches the value to Yes/No using the toggle control and clicks the button [Submit].

The provided data will be displayed on the SharePoint list.

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

How to Change Power Apps Toggle to Radio Button

In this section, I will take a simple scenario to replace the Power Apps Toggle [On/Off] Radio Button [Yes/No] value. For that, follow the steps below:

1. Add a Power Apps Edit Form and connect the SharePoint list as a data source.
2. Replace the Power Apps Toggle control with the Radio button control.
3. Save the Radio button value to the SharePoint list.

For Example, I have a SharePoint Online list named “Travel Requests“ that has various columns like:

Step 1: Add a Power Apps Edit Form and connect the SharePoint list as a data source

• Open your Power Apps with respective Microsoft credentials.
• Create a Power Apps Blank canvas app -> Connect to the SharePoint Online list -> as in the screenshot below:

• On the Power Apps Screen, insert an Edit form -> Set its DataSource property to:

'Travel Requests'

Where,

1. Travel Requests = SharePoint list name

• In the Power Apps Edit form, the SharePoint Yes/No column value can be represented through a Toggle control that displays an On/Off value.

Now, let’s check how to replace the toggle control with a radio button control.

Step 2: Replace the Power Apps Toggle control with the Radio button control

• On the Power Apps Edit form, select the Approved_DataCard1 -> Remove the Toggle button -> Insert a Radio button -> Set its Items property to:

["Yes", "No"]

• Next, Select the Approved_DataCard1 -> Set its Update property to the code below.

If(
    Radio_Approved.Selected.Value = "Yes",
    true,
    false
)

Where,

1. Radio_Approved = Power Apps Radio Button control name

I replaced the toggle control with a radio button; let’s check how to save the user-selected item to a SharePoint list.

Step 3: Save the Radio button value to the SharePoint list

• On the Power Apps screen, Insert a Save icon -> Set its OnSelect property to:

SubmitForm(frm_NewTravelRequest);
ResetForm(frm_NewTravelRequest)

Where,

1. frm_NewTravelRequest = Power Apps Edit Form Name

• Once your Power Apps app is ready, Save, Publish, and Preview the app whenever the users provide the value as “Yes”/ “No” in the Power Apps Radio button. Then click on the Save icon.
• That record will be saved to the SharePoint list as shown below:

This is all about replacing the Power Apps Toggle On/Off value with the Radio button Yes/No value.

Conclusion

I hope this article helped you understand the Power Apps toggle control, its various properties, and how to use a toggle in a Power Apps canvas application.

Additionally, we learned how to save a Power Apps toggle value in a SharePoint list and convert a toggle button to a radio button in Power Apps, with examples.

Also, you may like some more Power Apps articles:

• Remove Last/LastN/First/FirstN Characters From String in Power Apps
• Power Apps Gallery Control
• Power Apps List box Control
• Power Apps Combo Box Control
• Power Apps Timer Control

Preeti Sahu

Preeti Sahu is an expert in Power Apps and has over six years of experience working with SharePoint Online and the Power Platform. She is the co-author of Microsoft Power Platform: A Deep Dive book. As a Power Platform developer, she has worked on developing various tools using Power Apps and Power Automate. She also makes Microsoft 365 videos and shares them on YouTube.