For more info please check the components's official demos & documentation
demos & documentation
<mat-checkbox> provides the same functionality as a native
<input type="checkbox"> enhanced with Material Design styling and animations.
Check me!
@Input() labelPosition: 'before' | 'after' Whether the label should appear after or before the checkbox. Defaults to 'after'
Check me!Slide labels position
@Output() change: EventEmitter<MatCheckboxChange> Event emitted when the checkbox's checked value changes.
Check me!Checked: {{ myValue }}
When user clicks on the
mat-checkbox, the default behavior is toggle checked value and set indeterminate to false. This behavior can be customized by
providing a new value of
MAT_CHECKBOX_CLICK_ACTION to the checkbox.
CheckedIndeterminateStartEndDisabled
Result:
I'm a checkbox