Custom Styling for Radio Buttons


While the default HTML radio buttons work well for a number of applications it is sometimes useful to be able to customize the size, shape, and color or radio buttons. This ability is particularly useful for mobile applications which rely on an onPress event; where the normal size radio buttons might be too small for some fingers.

A customized radio button control

To see a video explanation of this guide see this video.

Customizing Radio Buttons

  1. In the UX Builder on the UX Controls page open the 'Data Controls' menu and click on the [RadioButton] option to add a radio button control to the component.

  2. Highlight the Radio Button control. In the properties list scroll down to the Field Properties section, set the 'Width' property to 7in.

  3. In the 'RadioButton Properties' section click on the button next to the 'Choices' property.

  4. From the 'Choices are' menu select 'Static'

  5. Enter a list of choices to appear next to each radio button. Add one choice per line. Click OK.

    • images/cust5.png
    • images/cust6.png
  6. Check the 'Has custom design for Radio Buttons' checkbox.

  7. Click the button next to the 'Custom appearance designer' property.

  8. Check the 'Has checked image' property. By default custom radio buttons have a checkmark for this image.

    • images/cust9.png
    • images/cust10.png
      A checked image
  9. Click the button next to the 'Icon - checked' property.

  10. Select the 'Built-in Image' radio button and click 'Select'.

  11. Type 'green' into the Filter On textbox. Select the small green orb from the icon menu and click 'Insert'. Click OK.

    • images/cust13.png
    • images/cust14.png
  12. Change the 'Checkmark width' property to be 26px.

    • images/cust15.png
    • images/cust16.png
  13. Change the 'Checkmark height' property to be 26px.

    • images/cust17.png
    • images/cust18.png
  14. Change the 'Label indent' property to be 35px.

    • images/cust19.png
    • images/cust20.png
  15. Set the 'Vertical label alignment' to 'center'.

    • images/cust21.png
    • images/cust22.png
  16. Check the 'Has un-checked image' checkbox. This is the image that will fill a radio button that is not selected.

  17. Click the button next to the 'Icon - not checked' property.

  18. Choose the 'Built-in Image' radio button again an click 'Select'.

  19. Type 'red' into the 'Filter On' textbox and select the small red orb that appears in the menu. Click 'Insert' and OK.

    • images/cust26.png
    • images/cust27.png
  20. Uncheck both the 'Has checked image' and 'Has unchecked image' property. Check the 'Has checkmark background color' property.

    • images/cust28.png
    • images/cust29.png
  21. Click the button next to the 'Checkmark background color' property. From the color pallet select a desirable color.

    • images/cust30.png
    • images/cust31.png
  22. Change the 'Color gap' property to be 4px. This should shrink the size of the background color checkmark.

    • images/cust32.png
    • images/cust33.png
  23. Change the 'Checkmark border radius' property to be 20px. This will make the radio button appear more like a circle.

    • images/cust34.png
    • images/cust35.png
  24. Click the button next to the 'Checkmark border color' property and select a suitable color from the color picker. Click OK and OK again

    • images/cust36.png
    • images/cust37.png
  25. On the UX Controls page highlight the Radio Button control. In the 'Field Label' section of the properties list click on the button next to the 'Style' property.

  26. In the Style Editor's properties list scroll down to the 'Padding' section. Set the Bottom property to be 20px and click OK.

  27. Run the component in Live Preview