Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Checkboxes

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off
Material Design Guidelines: Checkboxes

Checkboxes

<mc-checkbox aria-label=checkbox></mc-checkbox>
<mc-checkbox checked label=Checked></mc-checkbox>
<mc-checkbox indeterminate label=Indeterminate></mc-checkbox>
<mc-checkbox disabled label=Disabled></mc-checkbox>
<mc-checkbox label="Checked disabled" checked disabled></mc-checkbox>
            

Label right

<mc-checkbox label=label></mc-checkbox>
<mc-checkbox label-left="Left label"></mc-checkbox>
<mc-divider style="margin: 24px 0;"></mc-divider>
<mc-checkbox label="label full width" class=full-width></mc-checkbox>
<mc-checkbox label-left="Left label full width" class=full-width></mc-checkbox>
            

Checkboxes error style

<mc-checkbox label="Click twice to make invalid" required></mc-checkbox>
            

Indeterminate

There is no input attribute for Indeterminate, only a property. An attribute has been added to mc-checkbox for convenience. Indeterminate overrides checked and unchecked states. If checked is changed then indeterminate will be set false.
<mc-checkbox indeterminate label=Indeterminate></mc-checkbox>
            

Style

CSS variables that allow you override default values
/* Optional variables for overriding */
  
--mc-checkbox-background-color: var(--mc-primary);
--mc-checkbox-background-disabled-color: var(--mc-on-surface);
--mc-checkbox-icon-color: var(--mc-on-primary);
--mc-checkbox-icon-disabled-color: var(--mc-surface);
--mc-checkbox-outline-color: var(--mc-on-surface-variant);
--mc-checkbox-outline-disabled-color: var(--mc-on-surface);
--mc-checkbox-label-disabled-color: var(--mc-on-surface);
            
menu home apps Get started