RadioButton

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
RadioButton on Android RadioButton on 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

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