class RadioButton

Extends:

UIComponent

Description:

RadioButton is a component used to select of multiple option by clicking on it.
Multiple RadioButton components must be grouped for selection to work.
To group them pick one main RadioButton and group other RadioButton components with it.
For example if you have three RadioButton components, you must group second component with first one, then third component with any component that is already grouped (first or second).
Then to detect selection changes add onChange(e => {console.log(e.value);}) to only one of the grouped RadioButton components, and e.value will be the value of currently selected RadioButton.

Constructor

constructor([text])

RadioButton constructor. Creates an instance of RadioButton UI component.

Parameters:

Members

• [ readonly ] container
• [ readonly ] group
• [ readonly ] id
• [ readonly ] parent
• [ readonly ] screenPosition

Methods

From this class:

• clearSelection()
• groupWith()
• selected()
• selectedValue()
• value()

Inherited from UIComponent:

• addTo()
• alignment()
• anchor()
• background()
• border()
• bottom()
• center()
• color()
• contextMenu()
• destroy()
• dragAction()
• dragData()
• dragDataType()
• dropAction()
• dropDataType()
• dropMode()
• emit()
• emitFocusKeyEvents()
• enabled()
• focusable()
• focused()
• font()
• getAncestor()
• getWindow()
• height()
• hide()
• iconAlignment()
• iconTextGap()
• index()
• isInside()
• layer()
• maxSize()
• minSize()
• move()
• onAction()
• onAncestorEvents()
• onChange()
• onComponentEvents()
• onDispose()
• onDragEvents()
• onDropEvents()
• onError()
• onFocusEvents()
• onKey()
• onMouseEvents()
• onMouseMotion()
• onMouseWheel()
• onPropertyChange()
• opacity()
• position()
• remove()
• right()
• size()
• snapshot()
• text()
• tooltip()
• updateUI()
• verifyComponent()
• visible()
• width()
• x()
• y()

Examples:

// Example how to group RadioButton components and detect when selected value of a group changes.

var mainForm = new Window("Demo").size(500, 300).show();

// create first RadioButton and sets group value change handler function
mainForm.radio1 = new RadioButton("Option 1").addTo(mainForm).position(10, 10).onChange(e => {console.log(e.value);});

// create second RadioButton and group it with first one
mainForm.radio2 = new RadioButton("Option 2").addTo(mainForm).position(10, 30).groupWith(mainForm.radio1);

// create third RadioButton and group it with first one
mainForm.radio3 = new RadioButton("Option 3").addTo(mainForm).position(10, 50).groupWith(mainForm.radio1);

// now when user clicks on any of these radio buttons a new selected value will be logged in console.