API
API reference for Angular Material checkbox
import {MatCheckboxModule} from '@angular/material';
Directives
MatCheckbox
A material design checkbox component. Supports all of the functionality of an HTML5 checkbox, and exposes a similar API. A MatCheckbox can be either checked, unchecked, indeterminate, or disabled. Note that all additional accessibility attributes are taken care of by the component, so there is no need to provide them yourself. However, if you want to omit a label and still have the checkbox be accessible, you may supply an [aria-label] input. See: https://www.google.com/design/spec/components/selection-controls.html
selector:mat-checkbox
Properties
Name |
Description |
---|---|
@Input('aria-label') ariaLabel |
Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will take precedence so this may be omitted. |
@Input('aria-labelledby') ariaLabelledby |
Users can specify the `aria-labelledby` attribute which will be forwarded to the input element |
@Input() id |
A unique id for the checkbox. If one is not supplied, it is auto-generated. |
@Input() disableRipple |
Whether the ripple effect for this checkbox is disabled. |
inputId |
ID of the native input element inside `<mat-checkbox>` |
@Input() required |
Whether the checkbox is required. |
@Input() Deprecated align |
Whether or not the checkbox should appear before or after the label. |
@Input() labelPosition |
Whether the label should appear after or before the checkbox. Defaults to 'after' |
@Input() name |
Name value will be applied to the input element if present |
@Output() change |
Event emitted when the checkbox's `checked` value changes. |
@Output() indeterminateChange |
Event emitted when the checkbox's `indeterminate` value changes. |
@Input() value |
The value attribute of the native input element |
@Input() checked |
Whether the checkbox is checked. |
@Input() indeterminate |
Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately set to false. |
@Input() color |
The color of the button. Can be `primary`, `accent`, or `warn`. |
Methods
toggle |
---|
Toggles the `checked` state of the checkbox. |
focus |
---|
Focuses the checkbox. |
Additional classes
MatCheckboxChange
Change event object emitted by MatCheckbox.
Properties
Name |
Description |
---|---|
source |
The source MatCheckbox of the event. |
checked |
The new `checked` value of the checkbox. |
MatCheckboxBase