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 checked disabled label="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 class="full-width" label="label full width"></mc-checkbox>
<mc-checkbox class="full-width" label-left="Left label full width"></mc-checkbox>
Checkboxes error style
<mc-checkbox required label="Click twice to make invalid"></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);