Radio-button

Select one of predefined values

A radio button or option button is a type of input that allows the user to choose only one of a predefined set of options. This is typically usable when the selectable options are few ( 1 - 20 )

Radio groups

Radiobuttons with common XPath / field binding

All radiobuttons sharing the same XPATH field binding will operate together as a GROUP in a rendered form. This ensures that user can only select one of the predefined options.

To implement a list of selectable fruits, set a common "XPath" to 'fruit' and set the desired "Check value" for each of the option buttons ( 'apple' ).

Setting common field binding to create radio group

Check Value

Defines the data to be set when user selects the option

The check-value property of a radio-button, defines the actual (text) value that will be stored in form data (xml). This means that when form is posted, the value of the xml-node adressed by Xpath (field-binding) will have the specified value.

Set "fruit" node value to "apple" when user clicks the option.

Field label / Accessibility

Label-for ( WCAG )

When creating web-forms, all input controls should have a clear semantic meaning to allow navigating and filling-in for visually impaired users. WCAG suggests this is solved by assigning a label to all input controls. WCAG also suggest that radiobuttons that belongs to the same group, should all reside within a GroupBox ( fieldset ). This will make it easier for visually impaired users to understand the semantic meaning of the radio-buttons.

Create explanatory textboxes for each radio button, and assign each of them as label for the corresponding option.

Assigning label to radio button

The wrapping groupbox (fieldset) LEGEND in above example, defines the semantic meaning of the buttons

Events