Button groups in WeWeb

Hey everyone Happy New Year! Does anyone know if there is any known good way to create button groups and also button groups as multiselects in the form in WeWeb?

Basically something like this: Screenshot 2024-01-08 at 21.18.41

Hi! Yes of course, there is multiple way to achieve this in WeWeb.
I would have created my own component “Button groups” with a repeated container and a button inside.
Then a variable storing the last clicked button. Then style the button depending of the variable state.

I did it for you Loom | Free Screen & Video Recording Software | Loom

1 Like

Thanks @Alexis this looks promising! Can you elaborate on how to achieve this? I see how to create my own component but inside I see “Elements to repeat” that I cannot find documented anywhere and I don’t know how to use. Basically I need to define options in this button-group.

Also I see that this works as button-group but can I have this working as multi-select in a form? Basically I need to style my multi-select that way. But Ii also have some regular button groups looking the same, so I am looking for both. But still a bit more info how to actually set it up would be much appreciated! :smile: I saw your Loom but it only show the end outcome - which is great as I can see that this is possible. But how? :smiley:

  1. How to configure repeating container
  2. How to define elements in the container - A,B,C,D… as separate buttons and options for multi-select
  3. How to pass the selected option to API call
  4. How to change styling of the selected buttons/options in multi-select
  5. How to reuse this component and easily define items inside, every time I use this component?

I think you should start with the academy to learn the basics of WeWeb.

academy.weweb.io, as your question are generic and not specific to your usecase. The academy will teach you how to display and send data to your API.

For components you can find more info on the documentation Intro to components | WeWeb documentation

And how to bind an Array of data to repeat it Binding data | WeWeb documentation