How do you customize ionic radio inputs to appear as grouped buttons?

ionic-v1
1

Something like we have in bootstrap
http://getbootstrap.com/components/#btn-groups

2

You could use ionic button bar http://ionicframework.com/docs/components/#button-bar and play with the activated class

3

Thanks for adding in. Yes, I saw button-bar but its just some buttons grouped inline. I am looking for a more out of the box and complete solution which has input radio logic.

4

To customize radio buttons, just hide the native html radio input via display:none and create a label for every radio input you have (the for-attribute should match the radio inputs id attribute). Then Style the label with css (here you can present them as grouped buttons). Every label should be wrapped in a parent container, which contains the label and the radio button, so you can style the active state of the radio button with the “plus” selector:

label + input[type='radio']:active {
  /*the styles for the active radio button*/
}

This trick lets you use the default radio logic, because the labels interact as layer for the hidden radio input fields.

5

Ended up writing a directive. Do check this