{{ field.renderContainerOpeningTag }}

  {{ field.renderLabel }}
  {{ field.renderInstructions }}
  <div class="mt-1 space-y-1{% if field.oneLine %} sm:flex sm:items-center sm:space-y-0 sm:space-x-5{% endif %}">
  {% for index, option in field.options %}
    <div class="flex gap-2">
      <div class="flex h-6 shrink-0 items-center">
        <div class="group grid size-4 grid-cols-1">
          <input type="checkbox"
            name="{{ field.handle }}[]"
            value="{{ option.value }}"
            id="{{ field.idAttribute }}-{{ index }}"
            class="{{ field.attributes.input.get("class") }}{{ field.hasErrors ? ' outline-1 -outline-offset-1 outline-red-700' }}"
            {{ option.value in field.value ? "checked" }}
          />
          <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25" viewBox="0 0 14 14" fill="none">
            <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
      <div class="text-sm/6">
        <label for="{{ field.idAttribute }}-{{ index }}" class="{{ field.attributes.optionLabel.get("class") }}{{ field.hasErrors ? ' text-red-700' }}">
          {{ field.translateOptionLabel(option) }} {# Use this for form builder translations #}
          {# {{ option.label|t('freeform')|raw }} #} {# Use this instead if using static translations #}
        </label>
      </div>
    </div>
  {% endfor %}
  </div>
  {{ field.renderErrors }}

{{ field.renderContainerClosingTag }}
