Button group form integration

Hello fellow Retool community!

I would find it very useful for some UI cases if we could have a component option that would essentially be a hybrid between a button group component and a segmented control or radio component. Where, as a user, I could not just have the option to attach an event to each button -- but also have the flexibility to instead set a form value from each button (if clicked) -- just like the segmented control and radio buttons are capable of doing. It isn't uncommon that our end-users prefer a 'button style' set of options to select over a radio or segmented control component (although the segmented control component is quite similar).

Also, having the ability to set form validation rules like whether they are required or not, and to be able to add a label to button groups.

Example of what this could look like:

1 Like

Hi @AJVancattenburch,

I am curious about what parts of the 'button group' component are most important for you in this use case.

From my understanding, it sounds like having this new component inside a form and conveying the state of which buttons have been clicked is the most important part for getting the form to handle the logic for validation rules.

Is the main issue that the 'segment control' and 'radio button' components have the right logic for their state but you are looking to change how it looks so that it would visually resemble the example you provided below?

@Jack_T thank you for the speedy reply!

Your second question more accurately targets what I'm trying to describe :slight_smile: Essentially, having the exact same configuration options that a segmented control or radio component would, but as buttons.

For example (hypothetically speaking), the current button group component could still exist separately, maybe called something like Event Button Group component for clear separation from what could be a Form Button Group component -- which could have the flexibility pass values rather than trigger events.

I would see it having the following capabilities:

  1. Being able to simply pass a value when clicked, which would then compress that button (just like a segmented control or radio component does) when you click an option. Without having to do something overly verbose like set up an event handler that sets a value to a variable or local storage, which is what you would currently have to do for the same behavior.
  2. Have a label, i.e., 'Select an option'
  3. Being able to pass validation rules, i.e. required, custom, etc. This way, we could do things like making it a required value that needs to be passed for an update to occur.

Hi @AJVancattenburch,

Thank you so much for the clarification!

I can add all these details to a feature request.

As you highlighted in point 1, this functionality can all be done via event handlers and variables with logic handling as a current work around. But having this all come shipped and default in a new component will definitely make things much easier to set up quickly.

1 Like

Yes this is exactly what I mean :slight_smile: Thank you @Jack_T I really appreciate the feedback and potential implementation! I will keep my eye out for it and hope to see it in an update sometime in the future :slight_smile:

1 Like