Chip

Chip 

  •         {% include "@Components/forms/chip/chip.twig" with {
  props : {
    id: "chip-internet",
    name: "amenities",
    value: "internet",
    label: "Internet",
    icon: {
      src: "images/svg/chips/wifi.svg"
    }
  }
} %}

      
  •               <div class="chip">
  <input class="chip__input" type="checkbox" id="chip-internet" name="amenities" value="internet">
  <label class="chip__label" for="chip-internet">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/wifi.svg" alt="Internet" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Internet</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>

Chip checked 

  •         {% include "@Components/forms/chip/chip.twig" with {
  props : {
    id: "chip-wellness-checked",
    name: "amenities-checked",
    value: "wellness",
    label: "Wellness",
    checked: true,
    icon: {
      src: "images/svg/chips/wellness.svg"
    }
  }
} %}

      
  •                 <div class="chip">
  <input class="chip__input" type="checkbox" id="chip-wellness-checked" name="amenities-checked" value="wellness" checked="checked">
  <label class="chip__label" for="chip-wellness-checked">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/wellness.svg" alt="Wellness" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Wellness</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>

Schema 

    {
  "props": {
    "label": {
      "type": "string",
      "description": "Visible text of the chip"
    },
    "name": {
      "type": "string",
      "description": "Name attribute of the input"
    },
    "value": {
      "type": "string",
      "description": "Value attribute of the input"
    },
    "id": {
      "type": "string",
      "description": "Id of the input, generated when not provided"
    },
    "checked": {
      "type": "boolean",
      "description": "Initial checked state"
    },
    "type": {
      "type": "string",
      "description": "checkbox (default) | radio"
    },
    "icon": {
      "type": "object",
      "description": "Props for the `icon` component (`src`, ...), rendered in a circular badge"
    },
    "extraClass": {
      "type": "string",
      "description": "Extra CSS class on the wrapper"
    },
    "attributes": {
      "type": "array",
      "description": "Raw attributes appended to the input"
    }
  }
}