How can I create radio buttons

Hey,

Newbie here. How do I create the radio buttons like these ones in the Tavolo app? I can’t find radio buttons in the form components. Is there a guide somewhere?

1 Like

If I am correct, they don’t use radio button, they build them using text (for the number) and rectangles (rounded, with or without the black background). When you click on, they switch from one rectangle to the other, for select/un select.

1 Like

Can you explain what you mean by select/unselect? I’m trying to create a radio button (4 buttons) but can’t seem to figure out how to do this.

Hi @dreamjobs,

Seems radio buttons are not built-in. I’ve managed to make a workaround. Here is the logic:

  • you create 4 boolean properties in the database collection, one for each button
  • you put 4 toggles, change active icon to “radio button checked” and inactive for “… unchecked”
  • you “attach” each of these 4 toggles to their respective boolean properties
  • as I understand toggles work in a way: when they are clicked, the property state changes immediately in the database (true to false, false to true). In radio buttons you don’t need that. The workaround is to create a click action for each toggle, when you explicitly change the property of this toggle to True, and other 3 to False.

It seem to work, though not very fast. Personally I decided to use the other UX interface type.

Just in case, video demo

2 Likes