jqwidgets-framework/demos/Angular/src/checkbox/defaultfunctionality/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<div style='font-family: Verdana Arial; font-size: 12px; width: 400px;'>
  <div style='float: left; width: 400px;'>
    <h3 style='margin-left: 15px;'>Categories</h3>
    <jqxCheckBox style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25'>
      Entertainment
    </jqxCheckBox>
    <jqxCheckBox style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25' [checked]='true'>
      <span>Computers</span>
    </jqxCheckBox>
    <jqxCheckBox style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25'>
      <span>Sports</span>
    </jqxCheckBox>
  </div>
  <div style='float: left; width: 400px; margin-top: 10px;'>
    <jqxCheckBox style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25'>
      Health
    </jqxCheckBox>
    <jqxCheckBox style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25'>
      <span>Finance</span>
    </jqxCheckBox>
    <jqxCheckBox style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25'>
      <span>Travel</span>
    </jqxCheckBox>
  </div>
  <div style='float: left; width: 400px; margin-top: 10px;'>
    <jqxCheckBox style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25'>
      Music
    </jqxCheckBox>
    <jqxCheckBox style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25'>
      <span>Technology</span>
    </jqxCheckBox>
    <jqxCheckBox style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25'>
      <span>Publishing</span>
    </jqxCheckBox>
  </div>
  <br />
  <div style='float: left; width: 400px; margin-top: 10px;'>
    <h3 style='margin-left: 15px;'>States</h3>
    <jqxCheckBox (onChange)="checkBox10OnChange($event)" style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25' [checked]='true'>
      <span #span10>Checked</span>
    </jqxCheckBox>
    <jqxCheckBox (onChange)="checkBox11OnChange($event)" style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25' [checked]='false'>
      <span #span11>Unchecked</span>
    </jqxCheckBox>
  </div>
  <div style='float: left; width: 400px; margin-top: 10px;'>
    <jqxCheckBox (onChange)="checkBox12OnChange($event)" style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25' [hasThreeStates]='true' [checked]='null'>
      <span #span12>Indeterminate</span>
    </jqxCheckBox>
    <jqxCheckBox style='margin-left: 10px; float: left;'
                 [width]='120' [height]='25' [disabled]='true'>
      <span>Disabled</span>
    </jqxCheckBox>
  </div>
</div>