Radio Buttons allow users to select one option from a set of mutually exclusive choices. Radio Buttons always appear in groups of two or more. Only one button in the group may be selected at a time. A Radio Button consists of a small circle and descriptive caption. A dot appears in the circle of the button that is selected. The absence of a dot indicates that the button is not selected. Radio Buttons often are used on forms or tests when users must make a single selection from multiple choices.
The Radio Button object corresponds to the <input type="radio"> HTML tag.
To create a Radio Button, use the mouse to draw a rectangle where you would like the button to appear. The Radio Button properties can be accessed from the Properties Panel, allowing you to define the Radio Button’s appearance and behavior.
- caption: use this property to add some text near to the Radio Button.
- id: use this property to set a unique name for your Radio Button. It will allow you later to modify its properties programatically.
- property-name: this is important if you want to send the data from a Form with a Radio Button to a server. The server script will get the value associated to this property.
- value: value to send to the server when the Radio Button has been selected.
- variable: if you want to store the selected value into a variable, just add the variable name using brackets into the variable property (ie: [gender]). For more information see Understanding Actions and Variables.
- css-class: use the value "neoradio" to provide the radio button with a modern stilized design.
In order to use a group of Radio Buttons to work together, you must assign them the same property-name value.
Let's try a simple example. Imagine you want your App user to select his or her gender, so only one option can be chosen.
First we must add three Radio Buttons, each one with one of these caption values: male, female, other.
Now try your App. You will notice that all the Radio Buttons can be chosen at the same time and that's not correct. To fix that it is necessary to assign to all of them the same property-name, in this case "gender".
Try again. Now the Radio Buttons are mutually exclusive: whenever you select one of them the other one is deselected.
Finaly, lets imagine we have to send that user data to a server script through a Form object. Probably you will need only a single letter as a final value: M, F or O. To achive that, just use the corresponding letter for each Radio Button into its value property.