Switchers are a type of container widget that allows switching between two different UIs.

For an example of how this works, let’s set up a Switcher, then add a Text Widget to it. Here I’ve written the text “State A” and applied a colored background to it:

I then click “Add to Switcher” and add a second Text object, Text B. I give it a red background. But as you can see it doesn’t show up:

That’s because the Switcher is still set to show Text A. If we click on the Switcher in Hierarchy, we can see that its Active Widget is set to 0 (the first Widget beneath it).

If we change that to “1,” we’ll switch to Text B.

If you add Panels or Canvases under the Switcher, then toggling the switcher will toggle between everything within those panels or canvases.

For a practical example, this Health Bar has a switcher to toggle between Text widgets showing the current and max health, to Input fields the user can use to manually input those numbers. The “Active Widget” number in the Edit Switcher refers to the Text Shown Panel and the Edit Panel – so that one toggle will also toggle everything within those panels

Scripting Your Switcher

To actually accomplish this switch, you’ll need to apply a script to the widget, using the setActiveIndex method. Here’s an example of what that might look like:

For details, see Adding Scripts to UI.