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);