Checkbox

README

Demo

Components

mdc-checkbox

Status

Component	Ready to use
mdc-checkbox	Yes

Checked

Code

<mdc-checkbox></mdc-checkbox>

<mdc-checkbox checked></mdc-checkbox>

<mdc-checkbox default-checked></mdc-checkbox>

Disabled

Code

<mdc-checkbox default-checked disabled></mdc-checkbox>

<mdc-checkbox disabled></mdc-checkbox>

<mdc-checkbox indeterminate disabled></mdc-checkbox>

Indeterminate

Code

<mdc-checkbox indeterminate></mdc-checkbox>

<mdc-checkbox indeterminate default-checked></mdc-checkbox>

Invalid

Code

<mdc-checkbox aria-invalid="true"></mdc-checkbox>

<mdc-checkbox aria-invalid="true" default-checked></mdc-checkbox>

Name

Code

<form>
    <mdc-checkbox name="consent" value="newsletter"></mdc-checkbox>
    <mdc-checkbox name="consent" value="beta" default-checked></mdc-checkbox>
</form>

<form>
    <mdc-checkbox name="terms" value="terms" required></mdc-checkbox>
</form>

Required

Code

<mdc-checkbox required></mdc-checkbox>

<mdc-checkbox required default-checked></mdc-checkbox>

Tristate

Code

<mdc-checkbox tristate></mdc-checkbox>

<mdc-checkbox tristate default-checked></mdc-checkbox>

<mdc-checkbox tristate indeterminate></mdc-checkbox>

Value

Code

<form>
    <label><mdc-checkbox name="toppings" value="pepperoni"></mdc-checkbox> Pepperoni</label>
    <label><mdc-checkbox name="toppings" value="mushroom" default-checked></mdc-checkbox> Mushroom</label>
    <label><mdc-checkbox name="toppings" value="onion"></mdc-checkbox> Onion</label>
</form>