Chip fieldset

Amenity filters (hotelypenziony)

Internet

Restaurace

Snídaně

Parkoviště

Wellness

Bazén

Koupání

Klimatizace

Mazlíčci

Rodinné

Bezbariérové

Centrum

        {% include "@Components/forms/chip-fieldset/chip-fieldset.twig" with {
  props : {
    name: "amenities",
    inputs: [
      { id: "amenity-internet", value: "internet", label: "Internet", icon: { src: "images/svg/chips/wifi.svg" } },
      { id: "amenity-restaurant", value: "restaurace", label: "Restaurace", icon: { src: "images/svg/chips/restaurant.svg" } },
      { id: "amenity-breakfast", value: "snidane", label: "Snídaně", icon: { src: "images/svg/chips/breakfast.svg" } },
      { id: "amenity-parking", value: "parkoviste", label: "Parkoviště", icon: { src: "images/svg/chips/parking.svg" } },
      { id: "amenity-wellness", value: "wellness", label: "Wellness", icon: { src: "images/svg/chips/wellness.svg" } },
      { id: "amenity-pool", value: "bazen", label: "Bazén", icon: { src: "images/svg/chips/pool.svg" } },
      { id: "amenity-swimming", value: "koupani", label: "Koupání", icon: { src: "images/svg/chips/swimming.svg" } },
      { id: "amenity-ac", value: "klimatizace", label: "Klimatizace", icon: { src: "images/svg/chips/ac.svg" } },
      { id: "amenity-pets", value: "mazlicci", label: "Mazlíčci", icon: { src: "images/svg/chips/pets.svg" } },
      { id: "amenity-family", value: "rodinne", label: "Rodinné", icon: { src: "images/svg/chips/family.svg" } },
      { id: "amenity-accessible", value: "bezbarierove", label: "Bezbariérové", icon: { src: "images/svg/chips/accessible.svg" } },
      { id: "amenity-center", value: "centrum", label: "Centrum", icon: { src: "images/svg/chips/center.svg" } }
    ]
  }
} %}

          <fieldset class="chip-fieldset">
  
  <div class="chip-fieldset__list">
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-internet" name="amenities" value="internet">
  <label class="chip__label" for="amenity-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>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-restaurant" name="amenities" value="restaurace">
  <label class="chip__label" for="amenity-restaurant">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/restaurant.svg" alt="Restaurace" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Restaurace</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-breakfast" name="amenities" value="snidane">
  <label class="chip__label" for="amenity-breakfast">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/breakfast.svg" alt="Snídaně" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Snídaně</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-parking" name="amenities" value="parkoviste">
  <label class="chip__label" for="amenity-parking">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/parking.svg" alt="Parkoviště" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Parkoviště</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-wellness" name="amenities" value="wellness">
  <label class="chip__label" for="amenity-wellness">
          <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>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-pool" name="amenities" value="bazen">
  <label class="chip__label" for="amenity-pool">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/pool.svg" alt="Bazén" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Bazén</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-swimming" name="amenities" value="koupani">
  <label class="chip__label" for="amenity-swimming">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/swimming.svg" alt="Koupání" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Koupání</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-ac" name="amenities" value="klimatizace">
  <label class="chip__label" for="amenity-ac">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/ac.svg" alt="Klimatizace" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Klimatizace</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-pets" name="amenities" value="mazlicci">
  <label class="chip__label" for="amenity-pets">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/pets.svg" alt="Mazlíčci" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Mazlíčci</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-family" name="amenities" value="rodinne">
  <label class="chip__label" for="amenity-family">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/family.svg" alt="Rodinné" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Rodinné</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-accessible" name="amenities" value="bezbarierove">
  <label class="chip__label" for="amenity-accessible">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/accessible.svg" alt="Bezbariérové" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Bezbariérové</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>
              <div class="chip">
  <input class="chip__input" type="checkbox" id="amenity-center" name="amenities" value="centrum">
  <label class="chip__label" for="amenity-center">
          <span class="chip__icon">
        <span class="icon">
      <img src="images/svg/chips/center.svg" alt="Centrum" loading="lazy">
  
  </span>
      </span>
        <span class="chip__title">Centrum</span>
    <span class="chip__close">
      <img src="images/svg/close-gray.svg" alt="" loading="lazy">
    </span>
  </label>
</div>
      </div>
</fieldset>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Optional heading of the fieldset"
    },
    "name": {
      "type": "string",
      "description": "Name applied to all chips in the group"
    },
    "inputs": {
      "type": "array of objects",
      "description": "All props are documented by the component `chip`."
    }
  }
}