Power Apps Toggle Control + 10 Examples

In this Power Apps tutorial, we will discuss the Toggle control in Power Apps, its properties, and how to add the toggle control in Power Apps.

As far as we know, Power Apps has various controls for working with canvas apps; the Power Apps Toggle control is commonly used to represent an on/off or true/false state within an app.

We will also work with the Power Apps toggle value, Power Apps toggle yes/no, and many more like:

  • Power Apps set toggle value with button
  • Power Apps toggle default value
  • Power Apps toggle visibility
  • Power Apps toggle button filter
  • Power Apps toggle in gallery
  • Power Apps toggle disabled color | Power Apps toggle value if statement
  • Power Apps toggle onchange
  • Power Apps Toggle Reset

Power Apps Toggle Control

Power Apps Toggle control is a switch in Power Apps. By using this switch control, a user can turn on or turn off the toggle switch by using its handle.

The Power Apps toggle control works the same way as a checkbox. We can use its handle to turn it on and off. Follow the screenshot below for the Toggle control.

powerapps toggle value

Power Apps Toggle Control Properties

Next, I will discuss the Power Apps toggle control properties. Have a look at the below table.

PropertyDescription
DefaultIt is the initial value of a control before the user changes it
DisplayModeIt allows whether it is in Edit mode, View mode, or in Disable mode
FalseFillWhen the Toggle switch control is off, then the toggle fills with color
FalseHoverFillWhen the Toggle switch control is off, then the toggle hover fills with color
FalseTextIt helps to show the text value when the toggle switch is off
FillIt provides the background color of a toggle control
HandleFillIt provides the color to the toggle handle
OnChangeWhen the user changes the value of a control, then it specifies how the app responds
OnCheckWhen the toggle value changes to true, then it specifies how the app responds
OnSelectIt specifies how the app responds when the user hits the control
OnUncheckIt specifies how the app responds when the user changes the control value to false
Reset It helps the control back to its default value
TrueFillWhen the toggle switch is on, then the toggle fills with color
TrueHoverFillWhen the toggle switch is on, then the toggle hover fills with color
TrueText It helps to show the text value when the toggle switch is on
Visible It specifies whether the toggle switch control is displaying or hidden

Add Toggle Control in Power Apps

Here, I will show you how to add a toggle control in the Power Apps. On the Power Apps Screen, add a Toggle control [+ Insert > Inputs > Toggle], as shown below.

powerapps toggle yes no

Once you add a toggle control, its OnChange property is false, and its name is Toggle1, as shown below.

power apps toggle

Power Apps Toggle Value

Now, I will show you how to set the value to the Power Apps toggle control with a simple example.

See also  The Function Search Has Some Invalid Arguments in Power Apps

Example:

In Power Apps, there is a Toggle control and a Text label control. Now, I would like to display the text label value based on the toggle selected value [If the toggle value is enabled, the text label value is “500”. Otherwise, its value is “100” ].

To do so, on the Power Apps Screen, insert a Toggle control and a Text label control and set its Text property as:

Text = If(
    tgl_Value.Value = true,
    "Price: $100",
    "Price: $500"
)

Where,

  • tgl_Value = Power Apps toggle control name
powerapps toggle value if statement

Now, Save, Publish, and Preview the app. When you do the toggle switch value as “On“, then you can see the Price value will be automatically changed to “$100” depending on the condition, as shown below.

Output:

toggle in powerapps

Power Apps Toggle Yes/No

I have a SharePoint Online list named “Project Status List” and this list contains the below fields.

Column NameData Type
Project NameIt is a default single line of text
Is ApprovedYes/No
toggle powerapps

When I have added all these Yes/No fields in the Power Apps Edit form, then all the toggle text values appear with “On/Off” instead of “Yes/No“, as shown below.

powerapps toggle

To convert this Toggle text value from On/Off to Yes/No, you need to do the following things:

In the Power Apps edit form, select any one of your toggle data cards that you want to convert the text value from On to Yes and Off to No. Apply the below formula on its TrueText and FalseText property as:

TrueText = "Yes"

FalseText = "No"
toggle power apps

This way, you can work with Power Apps Toggle Yes/No.

See also  How to Select Multiple Items in Power Apps Gallery Control?

Power Apps Set Toggle Value with Button

Next, I will show you how to work with the Power Apps set toggle value with the button.

Suppose Power Apps has a Toggle control and a Button control. When a user presses the button, the toggle appears, and when the user taps the button again, it disappears.

To do this, select the Button control and apply the below formula on its OnSelect property.

OnSelect = UpdateContext({ToggleValue: !ToggleValue})

Where,

  • ToggleValue = Power Apps Variable name
powerapps set toggle value with button

Next, select the Toggle control and set the created variable on its Visible property as:

Visible = ToggleValue
toggle button powerapps

Now, Preview the app. Once the user presses the button, the toggle appears, and when the user taps the button again, it disappears, as shown below.

powerapps if toggle is true

Power Apps Toggle Default Value

Suppose you want to set the default value of the toggle control; follow the below steps.

Whenever the user adds a Toggle control by default, the toggle control appears with the FalseText [Off]. Now, I want to set the default property of the toggle control as TrueText [On].

For that, select the Toggle control and set its Default property as:

Default = true
powerapps toggle default value

This way, you can work with the Power Apps Toggle Default Value.

Power Apps Toggle Visibility

In this example, I will show you how to work with the Power Apps toggle visibility. In Power Apps, there is a Text table control and a Toggle control.

Whenever you click the toggle on the switch, the label will appear, and when you click toggle off the switch, then the label will disappear, as in the below screenshot.

powerapps set toggle value

To achieve it, set the below code on the Label control’s Visible property as:

Visible = tgl_Value.Value

Where,

  • tgl_Value = Power Apps toggle control name
powerapps toggle visibility

Power Apps Toggle Button Filter

I have a SharePoint Online list named “Project Tracker” and this list contains the below fields.

Column NameData Type
TitleIt is a default single line of text
DescriptionMultiple lines of text
Assigned ToPerson or Group
StatusChoice
reset toggle powerapps

In Power Apps, there is a Toggle control and a Gallery control. When a user is On the toggle control, the gallery filters all the SharePoint list records and displays only those whose status is “Completed.”

Similarly, when a user is Off the toggle control, the gallery will appear with all the Sharepoint records with all status values, as shown below.

power app toggle button

To work around this, follow the below steps.

1. Select the App object from the left navigation and set its OnStart property as:

OnStart = ClearCollect(colProjects, 'Project Tracker')

Where,

  • colProjects = Power Apps collection name
  • ‘Project Tracker’ = SharePoint Online list
PowerApps Toggle Button Filter

2. Now, insert a Gallery control and set its Items property as:

Items = If(
    tgl_Filter.Value,
    Filter(
        colProjects,
        Status.Value = "Completed"
    ),
    colProjects
)

Where,

  • tgl_Filter = Power Apps toggle control name
Power Apps Toggle Button Filter

3. Once it is done, Preview the app. The gallery control displays the filter records based on the toggle button selected value [On/Off], as shown below.

See also  Power Apps Calculate + 13 Examples

Output:

Power Apps Toggle Button Filter

This is how we can work with the ower Apps Toggle Button Filter.

Power Apps Toggle in Gallery

In this section, I will explain how to use toggle control in the Power Apps gallery control with a simple example.

Example:

In Power Apps, there is a Gallery control with a Department list and a toggle control. Whenever the user selects or turns on any specific toggle control, the rest of the toggle controls are disabled.

Have a look at the below output.

power app gallery toggle button

To achieve it, follow the below steps. Such as:

1. On the Power Apps Screen, insert a Gallery control and set its Items property as:

Items = ["IT","Finance", "Marketing", "HR", "Sales"]
powerapps toggle gallery

2. Next, add the Toggle control inside the gallery using the Edit icon, as shown below.

power apps toggle gallery

3. Now, select the respective screen and set its OnVisible property to the code below.

OnVisible =  Set(
    varToggle,
    true
)

Where,

  • varToggle = Power Apps variable name
toggle button power apps

4. Then, select the toggle from the gallery and set its DisplayMode property to the below code.

DisplayMode =  If(
    varToggle,
    DisplayMode.Edit,
    If(
        ThisItem.IsSelected,
        DisplayMode.Edit,
        DisplayMode.Disabled
    )
)
powerapps toggle button

5. Finally, select the OnChange property of the toggle control and apply the below formula.

OnChange = Set(
    varToggle,
    false
)
powerapps gallery toggle button

6. Save, Publish, and Reopen the app again and click on the toggle control from the gallery. You can see the clickable toggle will be on, and others will be in disable mode.

power apps gallery toggle button

Power Apps Toggle Disabled Color | Power Apps Toggle Value If Statement

Suppose you want to change the color of the toggle text. When the user turns on the toggle control, the toggle text will appear in green. In the same way, if you turn Off the toggle control, the toggle text will appear in red.

To do so, select the Toggle control and set its Color property to the code below.

Color = If(
    tgl_Value.Value,
    Color.Green,
    Color.Red
)

Where,

  • tgl_Value = Power Apps toggle name
powerapps disable toggle color

Finally, Preview the app. Once the user turns on the toggle control, the toggle text will appear in green. Also, if you turn Off the toggle control, the toggle text will appear in red, as shown below.

power apps disable toggle color

Power Apps Toggle OnChange

In this section, I will discuss how to work with the Power Apps toggle OnChange with a simple example.

Example:

In Power Apps, there is a Toggle control and a Text label control. When the user turns on the toggle control, the text label displays the text [“Approved”]. On the other hand, when the user turns off the toggle control, the text label displays the text [“Rejected”].

Output:

power apps toggle onchange

To achieve it, select the Text label control and set the below code on its Text property as:

Text = If (
    tgl_OnChange.Value,
    "Approved",
    "Rejected"
)

Where,

  • tgl_OnChange = Power Apps toggle control name
powerapps toggle onchange

This way, we can work with the Power Apps Toggle OnChange.

Power Apps Toggle Reset

Suppose you want to reset the Power Apps toggle control, add a Button control on the Power Apps Screen, and set its OnSelect property as:

OnSelect = Set(
    varReset,
    true
);
Set(
    varReset,
    false
)
powerapps toggle reset

Now, select the Toggle control and set its Reset property as:

Reset = varReset

Where,

  • varReset = Power Apps variable name
power apps toggle reset

Finally, Preview the app. When the user selects button control, the toggle control will be reset, as shown below.

Output:

set toggle value powerapps

This way, you can reset the Power Apps toggle control.

Additionally, you may like some more articles below:

I trust this Power Apps tutorial is helpful. If you have any requirements related to working with the Power Apps Toggle control, you can follow the above examples, which are related to real-time scenarios.

  • this is such a great info on toggle. Thank you for the effort. I have encountering an issue where togglevalue is saved the sharepoint list but when i open the list item , the toggle does not retain the saved value. Any idea how to fix it ? TIA!

  • >