Gets the required state of the radio group.
Indicating whether the radio group is required.
// Check if the radio group is required
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
console.log(ctrl.required);
Sets whether the radio group requires a selection. If set to true
, the user must choose one of the radio buttons in the group.
true
to set the radio group as required, false
to set it as not required.
// Set the radio group as required
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
ctrl.required = true;
// Set the radio group as not required
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
ctrl.required = false;
Checks the validity of the control.
const validityResult = await ix.api.dom.getControl("<GUID>").checkValidity();
// example of `validityResult` - field is required, but was not filled
ValidationInfo {
valStatus: false,
valMessage: 'Please make a selection',
valType: 'required'
}
Retrieves the value of the currently selected radio button in the group.
The value of the selected radio button, or undefined
if no button is selected.
// Get the value of the selected radio button
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>")
var value = ctrl.getValue();
console.log(value);
Retrieves a list containing all values, including their title, value and checked state.
// Get all values
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
var values = ctrl.getValues();
// Possible returned array format:
[
{ title: "Salami", value: "salami", checked: false },
{ title: "Olive", value: "olive", checked: true }
]
Sets the value of the radio group by selecting the radio button with the specified value. If the specified value does not exist among the radio buttons, all buttons are deselected.
Optionally, triggers the change
event based on the settings parameter.
The value of the radio button to be selected.
Optional
settings: { Optional settings to control the triggering of the change
event.
// Get the radio group
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
// Select the radio button with the value "olive" and trigger the `change` event
ctrl.setValue('olive', {
triggerOnchange: 'always'
});
Represents a radio group control.
It is a control that consists of a group of radio options. Only one option can be selected at a time. The value of the selected option is stored as text in a data field that is automatically created when the control is instantiated. This data field can be linked to the control for data binding purposes.
This control provides a user-friendly interface for presenting a list of mutually exclusive choices to the user and capturing their selection.
Note
This control operates the same way on both edit and view pages. Refer to this documentation for guidance on its use on view pages as well.