Question

Extends Widget

A radio button. Selecting a radio button de-selects all its siblings (i.e. all radio buttons within the same parent).

Import this type with “const {RadioButton} = require('tabris');”

Android	iOS

Properties

checked

Type: boolean, default: false

The checked state of the radio button.

checkedTintColor

iOSAndroid

Type: Color

The color of the selectable area in checked state. Will fall back to tintColor if not set.

text

Type: string

The label text of the radio button.

textColor

Type: Color

The color of the text.

tintColor

iOSAndroid

Type: Color

The color of the selectable area.

Events

checkedChanged

Fired when the checked property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: boolean The new value of checked.

checkedTintColorChanged

Fired when the checkedTintColor property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: Color The new value of checkedTintColor.

select

Fired when the radio button is selected or deselected by the user.

Event Parameters

• target: this The widget the event was fired on.

• checked: boolean The new value of checked.

textChanged

Fired when the text property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: string The new value of text.

textColorChanged

Fired when the textColor property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: Color The new value of textColor.

tintColorChanged

Fired when the tintColor property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: Color The new value of tintColor.

Example

const {RadioButton, ui} = require('tabris');

// Create radio buttons with checked handlers

['One', 'Two', 'Three'].forEach((title) => {
  new RadioButton({
    left: 10, top: 'prev() 10',
    text: title
  }).on('checkedChanged', ({target, value: checked}) => {
    if (checked) {
      console.log(target.text + ' checked');
    }
  }).appendTo(ui.contentView);
});

See also

• Simple RadioButton snippet