Default

By default, a checkbox input includes a selected and unselected state.

<Checkbox />

<Checkbox />

Checked

The checkbox state is managed by react and is set to checked:

() => {
    const [ checked, setChecked ] = useState(true);
    return <Checkbox onCheckedChange={() => setChecked(!checked)} checked={checked} />
};

() => {
    const [ checked, setChecked ] = useState(true);
    return <Checkbox onCheckedChange={() => setChecked(!checked)} checked={checked} />
};

Unchecked

The checkbox state is managed by react and is set to unchecked:

() => {
    const [ checked, setChecked ] = useState(false);
    return <Checkbox onCheckedChange={() => setChecked(!checked)} checked={checked} />
};

() => {
    const [ checked, setChecked ] = useState(false);
    return <Checkbox onCheckedChange={() => setChecked(!checked)} checked={checked} />
};

Disabled

The checkbox is disabled:

<Checkbox disabled={true} />

<Checkbox disabled={true} />

The checkbox state is disabled, and the checkbox is checked:

<Checkbox disabled={true} checked={true} />

<Checkbox disabled={true} checked={true} />