<div style="display: flex; flex-direction: column; gap: 8px">
            <label class="ss-c-checkbox__label">
                <input type="checkbox" class="ss-c-checkbox" />
                Unchecked
            </label>
            <label class="ss-c-checkbox__label">
                <input type="checkbox" class="ss-c-checkbox" checked />
                Checked
            </label>
            <label class="ss-c-checkbox__label">
                <input type="checkbox" class="ss-c-checkbox" disabled />
                Disabled
            </label>
            <label class="ss-c-checkbox__label">
                <input type="checkbox" class="ss-c-checkbox" checked disabled />
                Checked disabled
            </label>
        </div>

<div style="display: flex; align-items: center; gap: 24px">
            <label class="ss-c-checkbox__label">
                <input
                    type="checkbox"
                    class="ss-c-checkbox ss-c-checkbox--sm"
                    checked
                />
                Small
            </label>
            <label class="ss-c-checkbox__label">
                <input type="checkbox" class="ss-c-checkbox" checked />
                Default
            </label>
            <label class="ss-c-checkbox__label">
                <input
                    type="checkbox"
                    class="ss-c-checkbox ss-c-checkbox--lg"
                    checked
                />
                Large
            </label>
        </div>

<div style="display: flex; align-items: center; gap: 24px">
            <label class="ss-c-checkbox__label">
                <input type="checkbox" class="ss-c-checkbox" checked />
                Accent
            </label>
            <label class="ss-c-checkbox__label">
                <input
                    type="checkbox"
                    class="ss-c-checkbox ss-c-checkbox--success"
                    checked
                />
                Success
            </label>
            <label class="ss-c-checkbox__label">
                <input
                    type="checkbox"
                    class="ss-c-checkbox ss-c-checkbox--warning"
                    checked
                />
                Warning
            </label>
            <label class="ss-c-checkbox__label">
                <input
                    type="checkbox"
                    class="ss-c-checkbox ss-c-checkbox--danger"
                    checked
                />
                Danger
            </label>
        </div>

<label class="ss-c-checkbox__label">
            <input
                type="checkbox"
                class="ss-c-checkbox"
                id="indeterminate-demo"
            />
            Indeterminate (set from JS:
            <code>input.indeterminate = true</code>)
        </label>
        <script>
            document.getElementById("indeterminate-demo").indeterminate = true;
        </script>

<fieldset style="border: 0; margin: 0; padding: 0">
            <legend
                style="
                    font-size: 12px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 0.06em;
                    margin-bottom: 8px;
                "
            >
                Notifications
            </legend>
            <div style="display: flex; flex-direction: column; gap: 8px">
                <label class="ss-c-checkbox__label">
                    <input type="checkbox" class="ss-c-checkbox" checked />
                    Email
                </label>
                <label class="ss-c-checkbox__label">
                    <input type="checkbox" class="ss-c-checkbox" checked />
                    Push
                </label>
                <label class="ss-c-checkbox__label">
                    <input type="checkbox" class="ss-c-checkbox" />
                    SMS
                </label>
            </div>
        </fieldset>