Widget “RadioButton”

Extends Widget

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

You can import this type like this:

import {RadioButton} from 'tabris';

Or reference it directly form anywhere as “tabris.RadioButton”. Android | iOS — | — RadioButton on Android | RadioButton on iOS

Properties

checked

Type: boolean, default: false

The checked state of the radio button.

checkedTintColor

Type: Color

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

font

Type: Font

The font used for the text.

text

Type: string

The label text of the radio button.

In JSX the text content of the RadioButton element is mapped to this property. Therefore <RadioButton>Hello World</RadioButton> would be the same as <RadioButton text='Hello World' />.

textColor

Type: Color

The color of the text.

tintColor

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

fontChanged

Fired when the font property has changed.

Event Parameters

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

  • value: Font The new value of font.

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

import {RadioButton, ui} from '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