Are here any Radio Buttons?

Apps (Frontend) Apps Builder
1

Hello together,

I search for an App the possibility to add Radio-Buttons for the switch between columns.
Is there a similar component, which I can use? Otherwise I would use a filter - but it doesn’t look as nice as a radio button :slight_smile:

Best regards,
Marcel

1 Like
2

Hi @Marcel_Schrauder,

I don’t think that the Apps-Builder has the ability to set the config for a checkbox-element to “radiobutton”, BUT - I have a css-hacky-solution for it of the already existing checkbox to style it into a radiobutton, which in my eyes pretty much works well, example:

image

image

Tutorial:

[YOUR-ELEMENT-ID] .o-checkbox__input:checked~.o-checkbox__check:after {
content: ’ ';
background: white;
width: 5px;
height: 5px;
display: block;
font-size: 24px;
position: absolute;
top: 5px;
left: 5px;
border-radius: 50%;
}

[YOUR-ELEMENT-ID] .o-checkbox__check {
border-radius: 50%;
}

[YOUR-ELEMENT-ID] .o-checkbox__check i {
display: none;
}

Replace “[YOUR-ELEMENT-ID]” with your existing element-id, otherwise it won’t call the classes (as you have learned in my workshop already :wink:, and paste this code in your CSS Element in the App Builder.

For detailed information, you can reach our directly to me via slack.

3

A radio button has the purpose to select only one option (true or false), while you use checkboxes to select multiple options. @nasir.ahmad is this taken into account with the hack? @Marcel_Schrauder If your aim is to filter something with this radio button (like a table or a chart) I would suggest you a filter as this is a known interaction. Radio Buttons are normally more used in Forms. You can reach out to me if you have any UX Questions :slight_smile:

1 Like
4

you are :100:% right, didnt thought abt that, @Marcel_Schrauder what is your usecase?

5

Hey together!
Thank you for all your answers - within the work on the App I forget to check my radiobutton question :smiley:
The Use-Case was to select if the Sum/Average/Median of the data is shown. In the end I get a solution with a variable single select and it worked perfectly fine.

My expectation for the radiobutton was like a ‘radio-button-group’, in which only one radiobutton could be true. If that would be implemented in the future, it would be really great :slight_smile: