Switch

Switch

        {% include "@Components/forms/switch/switch.twig" with {
  props : {
    id: "switch-button",
    value: "switch",
    label: "Switch",
    name: "switch"
  }
} %}

                <div class="switch">
  <input type="checkbox" c l a s s = " c o m p o n e n t - d o c " id="switch-button" name="switch" value="switch">
  <label class="f-label" for="switch-button">
  <span class="f-label__title">Switch</span>
</label>
</div>

Switch checked

Checked switch

        {% include "@Components/forms/switch/switch.twig" with {
  props : {
    id: "switch-button-checked",
    value: "switch-checked",
    label: "Checked switch",
    name: "switch-checked",
    checked: true
  }
} %}

                  <div class="switch">
  <input type="checkbox" c l a s s = " c o m p o n e n t - d o c " id="switch-button-checked" name="switch-checked" value="switch-checked" checked="checked">
  <label class="f-label" for="switch-button-checked">
  <span class="f-label__title">Checked switch</span>
</label>
</div>

Switch disabled

Disabled switch

        {% include "@Components/forms/switch/switch.twig" with {
  props : {
    id: "switch-button-disabled",
    value: "switch-disabled",
    label: "Disabled switch",
    name: "switch-disabled",
    disabled: true
  }
} %}

                  <div class="switch">
  <input type="checkbox" c l a s s = " c o m p o n e n t - d o c " id="switch-button-disabled" name="switch-disabled" value="switch-disabled" disabled>
  <label class="f-label" for="switch-button-disabled">
  <span class="f-label__title">Disabled switch</span>
</label>
</div>

Schema

    {
  "props": {
    "id": {
      "type": "string",
      "description": "id of input"
    },
    "value": {
      "type": "string",
      "description": "value of input"
    },
    "label": {
      "type": "string",
      "description": "label of input"
    },
    "name": {
      "type": "string",
      "description": "name of input"
    },
    "checked": {
      "type": "boolean",
      "description": "true | undefined"
    },
    "required": {
      "type": "boolean",
      "description": "true | undefined"
    },
    "disabled": {
      "type": "boolean",
      "description": "true | undefined"
    }
  }
}