Native looking radio buttons?


I’m building an app with forms that have either checkboxes or radio buttons.
Using ion-checkbox and ion-radio in the code.

With checkboxes the rendered controls follow the platform’s look n feel (iOS left, Android right):

But in the case of radio buttons both platforms have the same look:

Any suggestions?

Until we get a solution into master, you could use this as an unofficial hack.

Feel free to improve upon it

1 Like

@mhartington: Is it available in New release ?. Due to this Radio button issue i need to go for Native Development :frowning: Please provide me a better solution

Hmm, having to jump ship to native just because of radio buttons seems a bit much.
But you can get close with some css.


Super. Thanks. You save the day

@mhartington Is it possible to change the icon of the default ion-radio implementation, that is instead of using ion-checkmark can we use ion-android-radio-button-off and ion-android-radio-button-on.

By default when the ion-radio list loads, it should load with ion-android-radio-button-off icon and when user selects a list item the icon should change to ion-android-radio-button-on.

Basically I need a default radio button implementation instead of a checkmark, As this can mislead the user for checkbox.

If the above implementation can be achieved can you provide me with a codepen example.