Widget “CheckBox”

Extends Widget

A check box widget.

You can import this type like this:

import {CheckBox} from 'tabris';

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

Properties

checked

Type: boolean, default: false

The checked state of the check box.

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 check box.

In JSX the text content of the CheckBox element is mapped to this property. Therefore <CheckBox>Hello World</CheckBox> would be the same as <CheckBox 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 check box is checked or unchecked 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 {CheckBox, ui} from 'tabris';

// Create a check box with a checked handler

new CheckBox({
  left: 10, top: 10,
  checked: true,
  text: 'checked'
}).on('checkedChanged', event => event.target.text = event.value ? 'checked' : 'unchecked')
  .appendTo(ui.contentView);

See also