Radio button controls can make it easy for users of an application to quickly select items in a list. The size and appearance of radio controls can be modified easily using the Custom Appearance Designer and CSS.

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.

Dynamically Re-populate Choices in a Radiobutton Control

In some cases it is necessary to re-populate the choices in a radiobutton control after the component has been rendered. This can be done dynamically using an ajax callback.

Render Radio Buttons as a Button List

It is easy to render radio buttons controls and checkbox controls as a button list. This can be done by checking the 'Render as Button List' checkbox in the radio button or checkbox control's properties list.


Dyamically Repopulating Chocies in a RadioButton or CheckBox Control

In some applications, it might be necessary to repopulate the choices shown in a RadioButton or CheckBox control with a new set of choices after the UX Component has initially been rendered. An Ajax callback is made where the new choices are computed on the server, then a Javascript response is sent to the browser to update the choices for the control. These videos show how this can be done.

In part 2, the CheckBox is populated with a much larger set of choices and a snaking layout (left-to-right, top-to-bottom) for the CheckBox control is specified.

Download Component

The video shows an example for a CheckBox, but the same principle applies to radio buttons. The only difference is that the a5w_radiobuttons() function would be used on the server to compute the HTML for a RadioButton control

RadioButton and CheckBox Controls - Displaying as Button Lists

In mobile applications, the standard HTML RadioButton and CheckBox controls are not optimal for touch events. The UX builder makes it very easy to render RadioButton and CheckBox options as a button list instead of the standard HTML controls. In this video, we show how this is easily done.

Custom Styling for RadioButton and CheckBox Controls

The way an application looks is just as important as the features it offers your users. The default styilng for radio buttons and check boxes may not excite the customer. You can add your own customizations to display custom images and colors using the Custom appearance designer for RadioButton and CheckBox controls. Watch the video to learn more.

Download Component

See Also