<form class="car-selector js-car-selector" action="" method="get" data-endpoint="https://clever-components.fallwinter.dk/.netlify/functions/server/api/cars/">
    <div class="form-block form-block--select form-block--carBrand">
        <label for="carBrand">Car Brand</label>
        <div class="form-select">
            <select id="carBrand" name="carBrand">
                <option value="">Car Brand</option>
                <option value="Seat">Seat</option>
                <option value="Renault">Renault</option>
                <option value="Mercedes-Benz">Mercedes-Benz</option>
                <option value="Audi">Audi</option>
                <option value="Volvo">Volvo</option>
                <option value="Ford">Ford</option>
                <option value="Kia">Kia</option>
            </select>
        </div>
    </div>
    <div class="form-block form-block--select form-block--carModel">
        <label for="carModel">Car Model</label>
        <div class="form-select">
            <select id="carModel" name="carModel" disabled>
                <option value="">Car Model</option>
            </select>
        </div>
    </div>
    <div class="form-block form-block--button">
        <button class="form-button btn" type="submit" disabled>
            <span class="text">View</span>
        </button>
    </div>
</form>
<form class="car-selector js-car-selector" action="{{ carSelectorFormAction }}" method="{{ carSelectorFormMethod|default('get') }}" data-endpoint="{{ carSelectorApiEndpoint }}">
	{% for formBlock in carSelectorFormBlocks %}
		{% include '@' ~ formBlock.type with formBlock.content %}
	{% endfor %}
</form>
{
  "carSelectorFormAction": null,
  "carSelectorApiEndpoint": "https://clever-components.fallwinter.dk/.netlify/functions/server/api/cars/",
  "carSelectorFormBlocks": [
    {
      "type": "form-block-select",
      "content": {
        "formBlockLabel": "Car Brand",
        "formBlockName": "carBrand",
        "formBlockOptions": [
          {
            "value": "",
            "label": "Car Brand"
          },
          {
            "value": "Seat",
            "label": "Seat"
          },
          {
            "value": "Renault",
            "label": "Renault"
          },
          {
            "value": "Mercedes-Benz",
            "label": "Mercedes-Benz"
          },
          {
            "value": "Audi",
            "label": "Audi"
          },
          {
            "value": "Volvo",
            "label": "Volvo"
          },
          {
            "value": "Ford",
            "label": "Ford"
          },
          {
            "value": "Kia",
            "label": "Kia"
          }
        ]
      }
    },
    {
      "type": "form-block-select",
      "content": {
        "formBlockLabel": "Car Model",
        "formBlockName": "carModel",
        "formBlockDisabled": true,
        "formBlockOptions": [
          {
            "value": "",
            "label": "Car Model"
          }
        ]
      }
    },
    {
      "type": "form-block-button",
      "content": {
        "formBlockDisabled": true,
        "formBlockButtonLabel": "View",
        "formBlockButtonAttributes": {
          "type": "submit"
        }
      }
    }
  ]
}
  • Handle: @car-selector
  • Preview:
  • Filesystem Path: resources/components/02-units/car-selector/car-selector.twig

No notes defined.