Component reference

Checkboxes

Material 3 Expressive Checkbox components for selecting multiple options.

Material 3Web ComponentFramework agnostic

Usage

Checkboxes can be used to turn an option on or off.

<m3-checkbox></m3-checkbox>
<m3-checkbox checked></m3-checkbox>

Checkboxes can have an indeterminate state, representing a mix of checked and unchecked values.

<m3-checkbox indeterminate></m3-checkbox>

Checkboxes can be disabled to prevent user interaction. They can be unchecked, checked, or indeterminate while disabled.

<m3-checkbox disabled></m3-checkbox>
<m3-checkbox checked disabled></m3-checkbox>
<m3-checkbox indeterminate disabled></m3-checkbox>

Listen to the native change event to respond to user interaction.

I accept the terms and conditions

Accepted: No

<m3-checkbox
  [checked]="termsAccepted"
  (change)="onCheckboxChange($event, 'terms')">
</m3-checkbox>