{%- doc -%}
  Renders a checkbox input and label

  @param {string} id - input id attribute
  @param {string} name - input name attribute
  @param {string} value - input value attribute
  @param {string} label - label text
  @param {boolean} checked - whether the input is checked
  @param {string} events - event attributes for the input, e.g. 'on:click="/action"'
  @param {boolean} disabled - whether the input is disabled
  @param {boolean} [required] - whether the input is required
  @param {string} [formId] - form id attribute for the input
  @param {string} [inputRef] - input ref attribute for use with component framework
  @param {string} [labelRef] - label ref attribute for use with component framework
  @param {boolean} [autofocus] - whether the input should be autofocused
{%- enddoc -%}
<div
  class="checkbox{% if disabled %} checkbox--disabled{% endif %}"
  {{ events }}
>
  <input
    type="checkbox"
    name="{{ name }}"
    value="{{ value }}"
    id="{{ id }}"
    class="checkbox__input"
    data-label="{{ label }}"
    {% if checked %}
      checked
    {% endif %}
    {% if disabled %}
      disabled
    {% endif %}
    {% if required %}
      required aria-required="true"
    {% endif %}
    {% if formId != blank %}
      form="{{ formId }}"
    {% endif %}
    {% if inputRef != blank %}
      ref="{{ inputRef }}"
    {% endif %}
    {% if autofocus %}
      autofocus
    {% endif %}
  >
  <label
    class="checkbox__label"
    for="{{ id }}"
    {% if labelRef != blank %}
      ref="{{ labelRef }}"
    {% endif %}
  >
    {{ 'icon-checkmark.svg' | inline_asset_content }}
    <span class="checkbox__label-text">{{- label -}}</span>
  </label>
</div>
