HTML | Checkbox | Compound Design System

<div class="co-form__field-group">
    <legend class="co-subheading-lg co-form__legend">
        Will you be travelling to any of these countries?
        <span class="co-form__optional">Optional</span>
    </legend>
    <p class="co-form__helper">
        Select all the countries that apply.
    </p>
    <p class="co-form__validation">
        <span class="co-sr-only">Error</span><i class="co-icon-24__error "></i>
        This field is required
    </p>
    <div class="co-d-flex co-flex-column co-row-gap-2">
        <div class="co-form__checkbox-group">
            <input class="co-form__checkbox" type="checkbox" id="checkbox2" />
            <label class="co-form__label co-body-md" for="checkbox2">
                France
            </label>
        </div>
        <div class="co-form__checkbox-group">
            <input class="co-form__checkbox" type="checkbox" id="checkbox3" checked />
            <label class="co-form__label co-body-md" for="checkbox3">
                Portugal</label>
        </div>

        <div class="co-form__checkbox-group">
            <input class="co-form__checkbox" type="checkbox" id="checkbox4" disabled />
            <label class="co-form__label co-body-md" disabled for="checkbox4">
                Spain</label>
        </div>

        <div class="co-form__checkbox-group">
            <input class="co-form__checkbox" type="checkbox" id="checkbox5" required name="agreement" value="allowed" />
            <label class="co-form__label co-body-md" for="checkbox5">
                New york</label>
        </div>
    </div>
</div>

Checkboxes

const indeterminateCheckbox =
document.getElementById("checkbox5");
if(indeterminateCheckbox !== null && indeterminateCheckbox !== undefined){
indeterminateCheckbox.indeterminate = true;
}

use this snippet for indeterminate checkbox

Property name	Description
required	To make the checkbox as required field.
checked	Controls the checked state of the checkbox.
disabled	Controls the disabled state of the checkbox.
indeterminate	Controls the indeterminate state of the checkbox.

Checkbox

Installation

Example

Properties