Increased click area for toggle buttons

[nico23]

Hi everyone,

I’d like to propose an enhancement for a future TouchGFX update.

Currently, the clickable area of a ToggleButton is limited strictly to the dimensions of the button’s image. While this works in simple cases, it can be limiting in more practical UI designs.

I suggest giving the ToggleButton a resizable clickable area, similar to the way the FlexButton works. Specifically, this would allow the developer to:

• Expand the clickable area independently via standard width and height properties.

• Freely position the toggle image within that area (just like an image placed inside a FlexButton).

Use case example:
Imagine a screen with multiple toggle options, each accompanied by explanatory text or an icon next to the button. With this feature, users could simply tap on the descriptive text or icon to activate the toggle, instead of having to precisely hit the small button image. This would significantly improve the user experience, especially on smaller screens or touch targets.

I believe this would make ToggleButtons much more flexible and touch-friendly. Thanks for considering it!

 

 

EDIT: I just figured it out the title has a typo. If someone could edit “are” into “area”. Thanks

[JohanAstrup]

Hello Nico.

Thank you for the request.

However, is there any reason why you are not using the Flex Button triggered as Toggle?

Best regards,
Johan

[nico23]

Thanks for pointing it out; I may have missed the option to change the trigger status on the flex button. I’ll give it a try, but I think this will fix my issue

EDIT I have just checked but it seems there’s no option to Group them like the radio button; am I right?

[JohanAstrup]

Sorry, I missed that you were referring to radio buttons.

You are right; there is no built-in way to group them like radio buttons. I have passed on your request.

As a workaround, I imagine you could either implement your own Flex Button group, with great inspiration from the RadioButtonGroup class, or alternatively handle it manually in a custom container.

Best regards,
Johan