In this recipe, you will learn how to create a toggle group. Often in menus, there is an opportunity to choose between different options, but the player can choose only one of them. A toggle group allows users to select just one of its toggles. To achieve this, we will use the Toggle (Script) component along with the Toggle Group (Script) component.
- First of all, we need to create a panel in which our toggle elements will be placed. To do this, right-click on the Hierarchy panel and then on UI | Panel. Rename it to Toggle Group. Of course, it is possible to resize and place the panel as we wish.
- The next step is to add a Toggle Group (Script) component to our Toggle Group panel. To do so, click on Add Component | UI | Toggle Group.
- Now, we have to add our toggles. We can do this by right-clicking on the Toggle Group panel in the Hierarchy panel and selecting UI | Toggle. We can rename it to Toggle01 and duplicate it as many times as we want by pressing Ctrl + D. Each time we duplicate it, Unity will update the name for us in Toggle02, Toggle03, and so on.
- The toggles are all in the same place and with the same text. Therefore, we can change the text of the toggles to Option A, Option B, and so on. Finally, we need to displace the toggles in the panel — in order to separate them — until we have obtained something that looks like this:
- Next, we have to link all of these toggles together and make them act as a toggle group. To do this, we need to select all of them so that we can then drag the Toggle Group panel in the Group variable. This last variable can be found inside the Toggle (Script) component in the Inspector. As a result, for each toggle, we should have something that should appear like the following:
- As a final step, we need to leave just one toggle checked. To do this, we can select all the toggles except the one we want to leave checked, and uncheck their Is On variable from the Inspector. Now, we can press play and test whether everything works.
By default, each toggle element is separated from all others. For this reason, we need to create a toggle group. This is a script that checks whether one of its elements changes state and consequently modifies the state of the other elements accordingly. For example, if a toggle becomes checked, and since we want exactly one toggle checked at a single point in time, we need to uncheck the already checked toggle, if any. Luckily, we don't need to write this script from scratch. Unity offers a component called Toggle Group (Script) that handles this kind of interaction for us. Therefore, we only need to link each toggle to this component to create a toggle group.
The following section will show us how we can remove the constraint to necessarily chose one of the options.
Removing the possibility to select an option from a toggle group for the player is an important design decision that needs to be made carefully, but it doesn't have any impact from a programming perspective. In fact, Toggle Group (Script) also takes care of this possibility. Thus, we need to select the Toggle Group panel from the Hierarchy panel, and inside the Toggle Group (Script) component in the Inspector, we need to check the Allow Switch Off variable. As result, if the player clicks on the currently checked toggle, it becomes unchecked as well as all other toggles.
Furthermore, we can set the default option of our toggle group to no choose, which means that at the beginning, no toggles are checked. We only need to uncheck the Is On variable from the toggle that we left in step number 6.