init

user/plugins/form/templates/forms/fields/toggle/edit_list.html.twig

@@ -0,0 +1,5 @@
+{%- if value -%}
+    <span><i class="published fa fa-check-circle"></i></span>
+{%- else -%}
+    <span><i class="unpublished fa fa-times-circle"></i></span>
+{%- endif -%}

user/plugins/form/templates/forms/fields/toggle/toggle.html.twig

@@ -0,0 +1,52 @@
+{% extends "forms/field.html.twig" %}
+
+{% macro spanToggle(input, length) %}
+  {% set space = repeat('  ', (length - input|length) / 2) %}
+  {{ (space ~ input ~ space)|raw }}
+{% endmacro %}
+
+{% import _self as macro %}
+
+{% set has_hidden = false %}
+{% for key, text in field.options %}
+  {% if key is empty %}
+    {% set has_hidden = true %}
+  {% endif %}
+{% endfor %}
+
+{% block global_attributes %}
+  {{ parent() }}
+  data-grav-field-name="{{ (scope ~ field.name)|fieldName }}"
+{% endblock %}
+
+{% block input %}
+  <div class="switch-toggle switch-grav {{ field.size }} switch-{{ field.options|length }} {{ field.classes }}">
+    {% set maxLen = 0 %}
+    {% for text in field.options %}
+      {% set translation = text|t|trim %}
+      {% set maxLen = max(translation|length, maxLen) %}
+    {% endfor %}
+
+    {# Value falls back to highlight instead of default #}
+    {% set highlight = field.highlight|string %}
+    {% set value = (value ?? default ?? highlight)|string %}
+
+    {% for key, text in field.options %}
+      {% set key = key|string %}
+      {% set id = (field.id ?? ("toggle_" ~ field.name)) ~ key %}
+      {% set translation = text|t|trim %}
+
+      <input type="radio"
+             value="{{ key }}"
+             id="{{ id }}"
+             name="{{ (scope ~ field.name)|fieldName }}"
+             {% if highlight is same as(key) %}class="highlight"{% endif %}
+             {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+             {% if key is same as(value) %}checked="checked"{% endif %}
+             {% if required %}required="required"{% endif %}
+             {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
+      />
+      <label for="{{ id }}">{{ (macro.spanToggle(translation, maxLen)|trim)|raw }}</label>
+    {% endfor %}
+  </div>
+{% endblock %}