API reference for Angular Material checkbox
import {MatCheckboxModule} from '@angular/material/checkbox';
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://material.io/design/components/selection-controls.html
Selector: mat-checkbox
Exported as: matCheckboxProperties
Name | Description |
---|---|
@Input('aria-describedby')
|
The 'aria-describedby' attribute is read after the element's label and field type. |
@Input('aria-label')
|
Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will take precedence so this may be omitted. |
@Input('aria-labelledby')
|
Users can specify the |
@Input()
|
Whether the checkbox is checked. |
@Input()
|
Theme color palette for the component. |
@Input()
|
Whether ripples are disabled. |
@Input()
|
Whether the checkbox is disabled. This fully overrides the implementation provided by mixinDisabled, but the mixin is still required because mixinTabIndex requires it. |
@Input()
|
A unique id for the checkbox input. If none is supplied, it will be auto-generated. |
@Input()
|
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()
|
Whether the label should appear after or before the checkbox. Defaults to 'after' |
@Input()
|
Name value will be applied to the input element if present |
@Input()
|
Whether the checkbox is required. |
@Input()
|
The value attribute of the native input element |
@Output()
|
Event emitted when the checkbox's |
@Output()
|
Event emitted when the checkbox's |
|
Default color to fall back to if no value is set. |
|
Tabindex to which to fall back to if no value is set. |
|
Returns the unique id for the visual hidden input. |
|
Reference to the ripple instance of the checkbox. |
Methods
focus | |
---|---|
Focuses the checkbox. |
|
Parameters | |
origin FocusOrigin = 'keyboard'
|
|
options? FocusOptions
|
|
toggle | |
---|---|
Toggles the |
MatCheckboxRequiredValidator
Validator for Material checkbox's required attribute in template-driven checkbox.
Current CheckboxRequiredValidator only work with input type=checkbox
and does not
work with mat-checkbox
.
Selector: mat-checkbox[required][formControlName] mat-checkbox[required][formControl] mat-checkbox[required][ngModel]
Properties
Name | Description |
---|---|
|
Methods
registerOnValidatorChange | |
---|---|
Parameters | |
fn () => void
|
|
validate | |
---|---|
Parameters | |
control AbstractControl
|
|
Returns | |
ValidationErrors | null
|
|
Classes
MatCheckboxChange
Change event object emitted by MatCheckbox.
Properties
Name | Description |
---|---|
|
The new |
|
The source MatCheckbox of the event. |
Interfaces
MatCheckboxDefaultOptions
Default mat-checkbox
options that can be overridden.
Properties
Name | Description |
---|---|
|
|
|
Type aliases
MatCheckboxClickAction
Checkbox click action when user click on input element.
noop: Do not toggle checked or indeterminate.
check: Only toggle checked status, ignore indeterminate.
check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
undefined: Same as check-indeterminate
.
type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
Constants
MAT_CHECKBOX_DEFAULT_OPTIONS
Injection token to be used to override the default options for mat-checkbox
.
const MAT_CHECKBOX_DEFAULT_OPTIONS: InjectionToken<MatCheckboxDefaultOptions>;
MAT_CHECKBOX_CLICK_ACTION
Injection token that can be used to specify the checkbox click behavior.
const MAT_CHECKBOX_CLICK_ACTION: InjectionToken<MatCheckboxClickAction>;
MAT_CHECKBOX_REQUIRED_VALIDATOR
const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
API reference for Angular Material checkbox-testing
import {MatCheckboxHarness} from '@angular/material/checkbox/testing';
Classes
MatCheckboxHarness
extends
ComponentHarness
Harness for interacting with a standard mat-checkbox in tests.
Methods
async
blur
|
|
---|---|
Blurs the checkbox. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
check
|
|
---|---|
Puts the checkbox in a checked state by toggling it if it is currently unchecked, or doing nothing if it is already checked. Note: This attempts to check the checkbox as a user would, by clicking it. Therefore if you
are using |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
focus
|
|
---|---|
Focuses the checkbox. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
getAriaLabel
|
|
---|---|
Gets the checkbox's aria-label. |
|
Returns | |
Promise<string | null>
|
|
async
getAriaLabelledby
|
|
---|---|
Gets the checkbox's aria-labelledby. |
|
Returns | |
Promise<string | null>
|
|
async
getLabelText
|
|
---|---|
Gets the checkbox's label text. |
|
Returns | |
Promise<string>
|
|
async
getName
|
|
---|---|
Gets the checkbox's name. |
|
Returns | |
Promise<string | null>
|
|
async
getValue
|
|
---|---|
Gets the checkbox's value. |
|
Returns | |
Promise<string | null>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isChecked
|
|
---|---|
Whether the checkbox is checked. |
|
Returns | |
Promise<boolean>
|
|
async
isDisabled
|
|
---|---|
Whether the checkbox is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isFocused
|
|
---|---|
Whether the checkbox is focused. |
|
Returns | |
Promise<boolean>
|
|
async
isIndeterminate
|
|
---|---|
Whether the checkbox is in an indeterminate state. |
|
Returns | |
Promise<boolean>
|
|
async
isRequired
|
|
---|---|
Whether the checkbox is required. |
|
Returns | |
Promise<boolean>
|
|
async
isValid
|
|
---|---|
Whether the checkbox is valid. |
|
Returns | |
Promise<boolean>
|
|
async
toggle
|
|
---|---|
Toggles the checked state of the checkbox. Note: This attempts to toggle the checkbox as a user would, by clicking it. Therefore if you
are using |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
uncheck
|
|
---|---|
Puts the checkbox in an unchecked state by toggling it if it is currently checked, or doing nothing if it is already unchecked. Note: This attempts to uncheck the checkbox as a user would, by clicking it. Therefore if you
are using |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
Interfaces
CheckboxHarnessFilters
A set of criteria that can be used to filter a list of MatCheckboxHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances whose label matches the given value. |
|
Only find instances whose name attribute is the given value. |