Standard components / Checkbox

Try a working example of CheckboxComponent and then see the code for the example.

This component doesn't have a lot of functionality, except that it has two behavior methods that allow it to be checked/unchecked programmatically. For example, suppose your website has an "Edit user account" form where you may want to automatically uncheck the checkbox "Available 24 hours" if user selects a time window in another field called "hours I'm available". This can be done with a code that looks something like this:

export class UserAccountFormComponent extends extend_as("UserAccountFormComponent").mix(Component).with() {
  constructor() {
    super();

    this.event_handlers.add({ event: "change", role: "hours_available", handler: (self, hours_available) => {
      if(hours_available.get("value") == null)
        self.findChildrenByRole("checkbox_24hours")[0].set("checked", true);
      else
        self.findChildrenByRole("checkbox_24hours")[0].set("checked", false);
    }});

  }
}

Now, changing the value of the hours_available field to anything but null will automatically uncheck the checkbox, and removing any value from hours_available field will automatically uncheck the checkbox - provided you have the following HTML:

Do not call behave("check") and behave("uncheck") behaviors when you want to change the value of the checkbox, but rather use set("checked", true/false). Behaviors are only responsible for the presentation, so they will change html-attributes, but not component's attributes. Setter, on the other hand, will do both, because it calls the behaviors in the callback.