dsfr4drupal-1.x-dev/components/toggle/toggle.twig

{% set attributes = attributes|default(create_attribute()) %}
{% set checked = checked ?? false %}
{% set display_current = display_current ?? true %}
{% set input_id = input_id|default('toggle-' ~ random()) %}
{% set input_name = input_name|default('toggle') %}
{% set input_value = input_value|default(1) %}
{% set label_attributes = create_attribute({class: 'fr-toggle__label', for: input_id}) %}
{% set state_checked = state_checked|default('Enabled'|t) %}
{% set state_unchecked = state_unchecked|default('Disabled'|t) %}

{% if display_current and label_checked and label_unchecked %}
  {% set label_attributes = label_attributes.setAttribute('data-fr-checked-label', label_checked).setAttribute('data-fr-unchecked-label', label_unchecked) %}
{% endif %}

{% if has_border %}
  {% set attributes = attributes.addClass('fr-toggle--border-bottom') %}
{% endif %}

{% if label_left %}
  {% set attributes = attributes.addClass('fr-toggle--label-left') %}
{% endif %}

{% if state %}
  {% set label_attributes = label_attributes.setAttribute('data-fr-checked-label', state_checked).setAttribute('data-fr-unchecked-label', state_unchecked) %}
{% endif %}

<div{{ attributes.addClass('fr-toggle') }}>
  <input
    type="checkbox"
    class="fr-toggle__input"
    id="{{ input_id }}"
    name="{{ input_name }}"
    value="{{ input_value }}"
    {% if hint_text %} aria-describedby="{{ input_id ~ '-hint-text' }}" {% endif %}
    {% if checked %} checked="checked" {% endif %}
  />
  <label{{ label_attributes }}>
    {{ label_checked }}
  </label>
  {% if hint_text %}
    <p class="fr-hint-text" id="{{ input_id ~ '-hint-text' }}">
      {{ hint_text }}
    </p>
  {% endif %}
  {% if errors %}
    <div class="fr-messages-group" id="{{ input_id }}-messages" aria-live="polite">
      {% for error in errors %}
        <p class="fr-message fr-message--error">{{ error }}</p>
      {% endfor %}
    </div>
  {% endif %}
</div>