Unity UI

A brief guide to UI toggles

Toggle objects by default come with a rectangular background, a check-mark image, and a label. This setup may seem too plain for most cases, however, you can end up with something appealing just by tweaking these components and using some utilities offered by Unity such as transitions.

The default and a tweaked toggle

Transitions

Like any other Selectable, toggles can have 4 types of transitions:

The four transition types

None is the default transition type, which provides no visual feedback.

Animation leverages Unity’s animation system to animate properties (such as colors and size). You can add an animator by clicking on “Auto Generate Animation” on the toggle script component. This generates an animation controller with the proper state transitions.

Generating an animation controller

To adjust animations, open up the animation panel (at Window/Animation/Animation), select the state you want to animate and tweak the properties.

Setting a blueish color transition for the highlighted state

Color tint applies tinting to the target graphic (which is set to the background image in our case). We can configure the colors for the corresponding states on the toggle script component.

A color tint configuration

Sprite swap works similarly to color tinting but uses sprites instead of colors. In order to achieve a basic sprite swap effect (just the on-off transition), you’ll need to:

• set the target graphic to the image of the interaction
• define the “on” image by setting the source image of the check-mark
• define the “off” image by setting the target graphic on the toggle

Implementing an on/off sprite swap

Transition states

Besides the transition types, it’s good to know the states and what triggers them.

• normal is the state active by default
• highlighted is active when you move the mouse over the element and preserved if we do not set the navigation mode to “none”.
• pressed is active when the toggle is being pressed
• disabled is active when the toggle is not interactable.

Observing changes

Detecting changes in the toggle can be done by either programmatically registering a value change listener or configuring it via the inspector. The former is probably more explicit, so we’ll use this approach in our sample.

Registering a listener from a script

Toggle groups

To make selections exclusive, you can organize the toggles into a group.

• Similarly to registering listeners, we can do it via the inspector by adding a new game object to the canvas with a ToggleGroup component, then setting the Group of the toggles to this instance of the game object.

Setting up a toggle group in the inspector

• Or, for example, by using a custom script which iterates over the children toggle objects and sets the group property for each item explicitly.

Setting up a toggle group from script

For more information about toggles visit the official documentation.