stack/src/components/fields/checkbox-field/checkbox-field.twig line 1

Open in your IDE?
  1. {%- set class_name = [
  2.   "f-checkbox",
  3.   "d-inline-flex align-items-center gap-2 u-posr",
  4.   props.type == "radio" ? "--radio" : "--checkbox",
  5.   props.disabled == true ? "--disabled" : null,
  6.   props.extra_class ? props.extra_class : null,
  7. ]|join(' ')|trim -%}
  9. {%- set attrs = [
  10.   'class="' ~ class_name ~ '"',
  11. ] -%}
  13. {%- set attrs = attrs|join(' ')|trim -%}
  15. {# Input attrs #}
  17. {%- set class_name_input = [
  18.   "f-checkbox__input",
  19.   "u-posa",
  20. ]|join(' ')|trim -%}
  22. {%- set attrs_input = [
  23.   'class="' ~ class_name_input ~ '"',
  24. ] -%}
  26. {% set type = props.type == "radio" ? "radio" : "checkbox" %}
  28. {%- set attrs_input = attrs_input|merge(['type="' ~ type ~ '"']) -%}
  30. {%- if props.id is defined %}
  31.   {%- set attrs_input = attrs_input|merge(['id="' ~ props.id ~ '"']) -%}
  32. {%- endif -%}
  34. {%- if props.required == true %}
  35.   {%- set attrs_input = attrs_input|merge(['required']) -%}
  36. {%- endif -%}
  38. {%- if props.value is defined %}
  39.   {%- set attrs_input = attrs_input|merge(['value="' ~ props.value ~ '"']) -%}
  40. {%- endif -%}
  42. {%- if props.checked == true %}
  43.   {% set attrs_input = attrs_input|merge(['checked="checked"']) %}
  44. {%- endif -%}
  46. {%- if props.disabled == true %}
  47.   {% set attrs_input = attrs_input|merge(['disabled']) %}
  48. {%- endif -%}
  50. {%- if props.name is defined %}
  51.   {% set attrs_input = attrs_input|merge(['name=' ~ props.name ~ '']) %}
  52. {%- endif -%}
  54. {%- if props.data is defined -%}
  55.   {%- set data_attrs = [] -%}
  56.   {%- for key, attribute in props.data -%}
  57.     {%- set data_attrs = data_attrs|merge(['data-' ~ key ~ '="' ~ attribute ~ '"']) -%}
  58.   {%- endfor -%}
  59.   {%- set data_attrs = data_attrs|join(' ')|trim -%}
  60.   {%- set attrs_input = attrs_input|merge([data_attrs]) -%}
  61. {%- endif -%}
  63. {%- set attrs_input = attrs_input|join(' ')|trim -%}
  66. <label {{ attrs|raw }}>
  67.   <input {{ attrs_input|raw }}>
  68.   <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
  69.     {% include "@Images/svg/check.svg" %}
  70.   </span>
  71.   <div class="f-checkbox__body d-flex flex-column">
  72.     <span class="f-checkbox__title u-color-primary u-fz-sm u-fw-600">
  73.       {% block content %}
  74.         {% if props.label %}
  75.           {{ props.label|raw }}
  76.         {% endif %}
  77.       {% endblock %}
  79.       {% if props.count %}
  80.         <span class="f-checkbox__count u-fw-400">({{ props.count }})</span>
  81.       {% endif %}
  82.     </span>
  84.     {% if props.description %}
  85.       <div class="f-checkbox__description u-fz-xs">{{ props.description|raw }}</div>
  86.     {% endif %}
  87.   </div>
  89.   {% include "@Components/fields/error-field/error-field.twig" with {props: {}} %}
  91. </label>