CheckBox

CheckBox displays a label beside a 48×48 button surface and emits the proposed next checked value when OK is pressed.

CheckBoxRig

Source: hosanna-ui-samples-public/src/hosanna-ui-examples/controls/CheckBoxRig.ts

@view('CheckBoxRig')
export class CheckBoxRigView extends BaseExampleScreenView<CheckBoxRigState> {
  @state isChecked1: boolean = false;
  @state isChecked2: boolean = false;

  protected override getViews(): ViewStruct<ViewState>[] {
    return [

      VGroup([
        CheckBox({
          id: 'checkBox1',
          text: 'check me',
          isChecked: this.isChecked1,
          labelStyleKey: 'controls.Label.checkbox',
          height: 48,
        })
          .isInitialFocus()
          .onCheckChange((event) => {
            this.isChecked1 = event.isChecked;
          }),
        Label({
          id: 'checkBoxStatus',
          text: `Checked: ${this.isChecked1}, ${this.isChecked2}`,
        }),
        CheckBox({
          id: 'checkBox2',
          text: 'check me',
          isChecked: this.isChecked2,
          labelStyleKey: 'controls.Label.checkbox',
          height: 48,
        })
          .onCheckChange((event) => {
            this.isChecked2 = event.isChecked;
          }),
      ]).itemSpacing(200)
        .id('hGroup')
    ];
  }

  onControlChange(event: CheckBoxEvent): void {
    if (event.view.id === 'checkBox1') {
      this.isChecked1 = event.isChecked;
    }
    if (event.view.id === 'checkBox2') {
      this.isChecked2 = event.isChecked;
    }
  }

}

CheckBox({
  text: 'Enable captions',
  isChecked: this.captionsEnabled,
})
  .onCheckChange((event) => {
    this.captionsEnabled = event.isChecked;
  });

CheckBox is controlled: it does not assign isChecked internally. Update the owning @state field (or another source of truth) in onCheckChange, then pass the new value back on the next render.

The event contains view, type: 'checkChange', isChecked, and preventDefault. Styles can distinguish normal, focused, selected, and focus-selected states.