Checkbox
Use checkboxes for multiple choice lists or properties or true/false properties of an event. Different color presets are available.
Demo
<mbsc-checkbox label="Option 1" description="Checked checkbox" [(ngModel)]="ch1"></mbsc-checkbox>
<mbsc-checkbox label="Option 2" description="Empty checkbox" [(ngModel)]="ch2"></mbsc-checkbox>
<mbsc-checkbox label="Option 3" description="Disabled checkbox" [(ngModel)]="ch3" disabled="true"></mbsc-checkbox>
<mbsc-checkbox label="Option 4" description="Disabled and checked checkbox" [(ngModel)]="ch4" disabled="true">
</mbsc-checkbox><mbsc-checkbox label="Primary" color="primary" [(ngModel)]="primary"></mbsc-checkbox>
<mbsc-checkbox label="Secondary" color="secondary" [(ngModel)]="secondary"></mbsc-checkbox>
<mbsc-checkbox label="Success" color="success" [(ngModel)]="success"></mbsc-checkbox>
<mbsc-checkbox label="Danger" color="danger" [(ngModel)]="danger"></mbsc-checkbox>
<mbsc-checkbox label="Warning" color="warning" [(ngModel)]="warning"></mbsc-checkbox>
<mbsc-checkbox label="Info" color="info" [(ngModel)]="info"></mbsc-checkbox>ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
ch1 = true;
ch2 = false;
ch3 = false;
ch4 = true;
primary = true;
secondary = true;
success = true;
danger = true;
warning = true;
info = true;
}
<mbsc-page>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Checkbox</div>
<mbsc-checkbox label="Option 1" description="Checked checkbox" [(ngModel)]="ch1"></mbsc-checkbox>
<mbsc-checkbox label="Option 2" description="Empty checkbox" [(ngModel)]="ch2"></mbsc-checkbox>
<mbsc-checkbox label="Option 3" description="Disabled checkbox" [(ngModel)]="ch3" [disabled]="true"></mbsc-checkbox>
<mbsc-checkbox label="Option 4" description="Disabled and checked checkbox" [(ngModel)]="ch4" [disabled]="true"> </mbsc-checkbox>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Checkbox colors</div>
<mbsc-checkbox label="Primary" color="primary" [(ngModel)]="primary"></mbsc-checkbox>
<mbsc-checkbox label="Secondary" color="secondary" [(ngModel)]="secondary"></mbsc-checkbox>
<mbsc-checkbox label="Success" color="success" [(ngModel)]="success"></mbsc-checkbox>
<mbsc-checkbox label="Danger" color="danger" [(ngModel)]="danger"></mbsc-checkbox>
<mbsc-checkbox label="Warning" color="warning" [(ngModel)]="warning"></mbsc-checkbox>
<mbsc-checkbox label="Info" color="info" [(ngModel)]="info"></mbsc-checkbox>
</div>
</mbsc-page>