Power BI Beginner Basics: How to Create Toggle Switches and When to Use Them

From the airplane mode switch in phone settings to the switch on your blender, both physically and digitally we use toggle switches everywhere. We interact with them daily to the point that we might not notice their prevalence. Even Power BI utilizes toggle switches in its formatting section–so of course there is also a place for them in our dashboards. In essence, they are a simple tool used to shift a feature between “ON” and “OFF”, allowing people to change the functionality and preferences of a given system.

Toggle switches can be a great UI addition if used properly. They are fun to interact with, visually appealing, and have good usability since they mimic real-world equivalents. Toggle switches can be used in a variety of situations, but did you know that they can be misused from a UI design standpoint?

When to Use Toggle Switches in Power BI

Binary Choice Toggle Switch

Think of the light control switches you use daily, one side turns the lights on and the other side turns them off. All toggle switches should follow this dynamic of shifting between two binary on/off options. There should be a clear default value or setting, and the options should always be mutually exclusive. In the case of the light switch, the feature in question is the light and the default is no lights.

One common misuse of the toggle switch is applying them between options that cannot be viewed in binary terms. In this scenario, the toggle is used not to switch a feature on or off as intended, but to switch between features entirely.

In the example below, there is no obvious default and there is no feature switching between on and off. The ability to look at the list of movies and the ability to look at the list of TV shows are two separate features.

Gif of list of TV shows using toggle switch

A better way to switch between non-binary states, in this case, is to use a toggle button, which is similar to the toggle switch but excludes the switch movement. The toggle button allows for immediate results without requiring the binary dynamic the toggle switch is known for.

Differentiating between binary and non-binary options can get tricky, so using your best judgment is key. I’ve included some examples of binary and non-binary options below. With each situation, think about what feature is in question and what the default might be–it should be much more obvious for the binary options.

Chart of when to use binary and nonbinary options
Immediate Effect Toggle Switch

Another distinctive characteristic of the toggle switch is its immediate effect. When using one, the effect of the switch should be implemented immediately after toggling. A “SUBMIT”, “APPLY”, or “SAVE” button should not be necessary. Just imagine having to save your settings every time you go into or out of airplane mode on a phone, what a hassle that would be! 

This characteristic of the toggle switch is a clear differentiator between it and other frequently used UI elements such as checkboxes and radio buttons. The automatic nature of the toggle switch is what lends it its usefulness in systemic changes.

When to Use

  • When the options are mutually exclusive 
  • When users must decide between turning a feature on and off 
  • When there is a default state or functionality
  • When the change or effect should be made immediately

When Not to Use

  • When the options are independent of one another
  • When there are multiple options available
  • When the user must validate the changes with another button

When to Use Toggle Switches in Power BI

Now that you have an idea of when to include a toggle switch, we’ll move onto how to make them. There are two different ways to create them in Power BI, depending on your situation. 

  1. Create a toggle switch with the Power BI blank button
  2. Create a toggle switch with downloaded toggle images 

I will show you step by step how to make a toggle switch using a Power BI blank button that shows or hides outliers in a graph as illustrated below.

Gif of a finished toggle

1. Set up the dashboard.

Create the same graph with and without the outliers and lay them on top of one another, making sure to appropriately name each in the Selection field, which can be accessed in the View tab. 

2. Create the “off” toggle. 

Add a blank button from the Insert tab and name it in the Selection field. Now that you have a blank button, you will format it to look like a toggle switch in the off position. Turn the Button Text on, and in the button text panel, click the Windows button and the semicolon to pull up the Windows emojis. Type in ‘circle’ to find the white circle emoji, and add it to the text panel. *You could also look up “white circle emoji” online and copy and paste it into the text panel* Center the text to the left so that the switch looks like it is in the off position and utilize the padding parameter to center the circle within the button if necessary. In Outline, change the Round Edges to 20px to make the button rounded. Remove the background and adjust the size of the button.

3. Create the “on” toggle.

Now to make the toggle in the on position, copy and paste the toggle that was just created. Again, name this toggle switch in the Selection field. Center the text to the right so that the switch looks like it is in the on position. Change the fill color to suit your dashboard theme. Now that you have the two toggle switch positions, place the buttons on top of one another. 

4. Label toggles.

For clarity, create two text fields to describe the toggle options and name them in the Selection field, putting both in the same location next to the toggle switches. *Short, concise labels are essential here*

5. Utilize Selection views and Bookmarks.

In the Selection field, hide the graph with the outliers, the toggle switch that is positioned on, and the text you would like to show when the toggle is on. In the View tab, open the Bookmarks field. Add a bookmark for this view, naming it appropriately. Now hide all the previously viewed items and “un-hide” the previously hidden items. Add a bookmark for this view, naming it appropriately. For each button, add a bookmark action to the appropriate bookmark.

 

6. Voila! You have yourself a working toggle switch!

Phew, that was a lot of instructions. You can follow along with the steps in this video to watch me go through the process.

Outside of building the toggle switch from scratch in Power BI, in the other option I mentioned previously you could download images of a toggle switch in the on and off position online, add the images to the dashboard, and turn them into buttons that switch between bookmarks as I’ve described above. This would be a good option if customizing the toggle switch is not necessary.

Now that you know when to use them and how to create them, go ahead and add a toggle switch to your next Power BI dashboard!

Extra special thanks to Jacob Kahn for inspiring this post.

Want to Learn More?

Have any questions, comments, or curiosities? Feel free to reach out to me about Power BI Toggle Switches via email at hayley.hadges@tessellationconsulting.com, LinkedIn, or on Twitter at @AskTessellation.

About Tessellation

We are a modern analytics consultancy. We enable and manage organizations’ analytics and self-service teams by educating people, optimizing technology, developing world-class products, and providing sustainable results. Curious to know how we can level up your organization’s analytics? Click here!

Interested in joining the Tessellation Team as a data analyst, Tableau expert, dashboard designer, or data scientist? We’re hiring! Check out our latest job listings on our website and on our Linkedin page!

Subscribe to Our 'Data Cap' Newsletter!

Want a monthly insights from the Tessellation Team with tips, tricks, and secrets to improve your analytics?

Sign up below and we'll deliver articles, events, and how to's straight to your inbox.
Comments are closed.