Option switch

Full

Pronájem Prodej Dražby

        {% include "@Components/forms/option-switch/option-switch.twig" with { props: {
  name: "filter-variant",
  items: [
  {
      title: "Pronájem",
      value: "1",
      checked: true
    },
    {
      title: "Prodej",
      value: "2"
    },
    {
      title: "Dražby",
      value: "3"
    }
  ]
} } %}

          <div class="f-option-switch">
      <label class="f-option-switch__label">
      <input class="f-option-switch__input" type="radio" name="filter-variant" value="1" checked="checked" >
      <span class="f-option-switch__button">Pronájem</span>
    </label>
      <label class="f-option-switch__label">
      <input class="f-option-switch__input" type="radio" name="filter-variant" value="2"  >
      <span class="f-option-switch__button">Prodej</span>
    </label>
      <label class="f-option-switch__label">
      <input class="f-option-switch__input" type="radio" name="filter-variant" value="3"  >
      <span class="f-option-switch__button">Dražby</span>
    </label>
  </div>

Compact

Výpis Mapa

        {% include "@Components/forms/option-switch/option-switch.twig" with { props: {
  variant: "compact",
  name: "map-variant",
  items: [
    {
      title: "Výpis",
      value: "list",
      checked: true
    },
    {
      title: "Mapa",
      value: "map"
    }
  ]
} } %}

          <div class="f-option-switch --compact">
      <label class="f-option-switch__label">
      <input class="f-option-switch__input" type="radio" name="map-variant" value="list" checked="checked" >
      <span class="f-option-switch__button">Výpis</span>
    </label>
      <label class="f-option-switch__label">
      <input class="f-option-switch__input" type="radio" name="map-variant" value="map"  >
      <span class="f-option-switch__button">Mapa</span>
    </label>
  </div>

Schema

    {
  "props": {
    "variant": {
      "type": "string",
      "description": "undefined | compact"
    },
    "name": {
      "type": "string",
      "description": "Unique / required"
    },
    "items": {
      "type": "array of objects",
      "description": "Object params: title:string | value:string > unique | checked:boolean"
    }
  }
}