How do you set Toggle UI interactable size manually in Unity?

Question

I'm trying to make a toggle UI like the one on this youtube(https://www.youtube.com/watch?v=mQTnB71NUAw&ab_channel=MaxShakurov").

This example uses a button UI to make this happen. But I'm trying to make it with a toggle UI that Unity provides.

But here is the problem that I faced.

Issue: There is a big difference in the interactable box size of what I expected.

Below is an example to make it easy to reproduce. My Unity version: 2018.4.23f1

1. I created a new project.
2. I added a default toggle UI
3. ---> There is a big difference between my expectation of interactable box size and the actual one.

My initial expectation was to make toggle UI to be able to interact with the size of its' target graphic.

How can you make a toggle UI to be able to interact on only the size of a target graphic?

Answer 1

The interaction space is expanded to any child object having a graphic element (Image, Text, etc) with Raycast Target enabled.

All you have to do is

1. Go to the Label object in the Hierarchy

2. Go to the Text component in the Inspector

3. Disable the Raycast Target checkbox

   

As a result you should now have only the checkbox itself interactive