<fieldset class="checkboxes checkboxes--disabled" disabled="disabled">
    <legend>Checkboxes</legend>
    <ul>
        <li>
            <label for="input405ope1kllpc7oxl">
                    <input id="input405ope1kllpc7oxl" name="checkbox" type="checkbox" checked="checked">
                    Checkbox Item One
                </label>
        </li>
        <li>
            <label for="input405ope1kllpc7oxm">
                    <input id="input405ope1kllpc7oxm" name="checkbox" type="checkbox" >
                    Checkbox Item Two
                </label>
        </li>
        <li>
            <label for="input405ope1kllpc7oxn">
                    <input id="input405ope1kllpc7oxn" name="checkbox" type="checkbox" >
                    Checkbox Item Three is remarkably long and will probably wrap on some screens if they are small enough
                </label>
        </li>
        <li>
            <label for="input405ope1kllpc7oxo">
                    <input id="input405ope1kllpc7oxo" name="checkbox" type="checkbox" >
                    Checkbox Item Four
                </label>
        </li>
    </ul>
</fieldset>
{% if checkboxes is not empty %}
<fieldset class="checkboxes {{ checkboxes.variant }}" {% if checkboxes.required %}aria-required="true"{% endif %} {% if checkboxes.disabled %}disabled="disabled"{% endif %}>
    <legend>{{ checkboxes.legend }}</legend>
    <ul>
        {% for item in checkboxes.items %}
            {% set input_id = 'input'|uniqid %}
            <li>
                <label for="{{ input_id }}">
                    <input id="{{ input_id }}" name="checkbox" type="checkbox" {% if item.checked %}checked="checked"{% endif %}>
                    {{ item.label }}
                </label>
            </li>
        {% endfor %}
    </ul>
</fieldset>
{% endif %}
{
  "checkboxes": {
    "legend": "Checkboxes",
    "items": [
      {
        "label": "Checkbox Item One",
        "checked": true
      },
      {
        "label": "Checkbox Item Two"
      },
      {
        "label": "Checkbox Item Three is remarkably long and will probably wrap on some screens if they are small enough"
      },
      {
        "label": "Checkbox Item Four"
      }
    ],
    "variant": "checkboxes--disabled",
    "disabled": true
  }
}

These checkboxes can be used in forms to collect data. They are not intended to be used as a standalone pattern. The required, disabled, error, and valid states are provided to be applied to checkboxes by form applications as needed.