Checkbox

A checkbox allows users to select one or multiple options from a group.

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

 


Examples

Default Checkbox

Storybook failed to load. Please connect to the VPN to access.

Default Checkbox

Rich Checkbox

Storybook failed to load. Please connect to the VPN to access.

Rich Checkbox

Storybook failed to load. Please connect to the VPN to access.

Rich Checkbox group