OFRAG Frontend Components Library v0.0.0

Dynamic Form: Half width: With fieldsets horizontal 

<div class="dynamic-form">
      <fieldset class="dynamic-form__fieldset--half-width-horizontal">
          <legend class="dynamic-form__fieldset-legend">Liefermethode</legend>
          <div class="dynamic-form__element">
              <div class="radio--light is-initialized is-filled-in">
                  <div class="radio__wrapper">
                      <input class="radio__input" id="deliveryMethod-home" type="radio" name="deliveryMethod" value="home" required checked data-address-form-show="delivery-address" data-address-form-hide="invoice-address" />
                      <label class="radio__label" for="deliveryMethod-home">Heimlieferung
                          *
                      </label>
                  </div>

              </div>

          </div>

          <div class="dynamic-form__element">
              <div class="radio--light is-initialized is-filled-in">
                  <div class="radio__wrapper">
                      <input class="radio__input" id="deliveryMethod-pickup" type="radio" name="deliveryMethod" value="pickup" required data-address-form-show="invoice-address" data-address-form-hide="delivery-address" />
                      <label class="radio__label" for="deliveryMethod-pickup">Pickup beim Händler
                          *
                      </label>
                  </div>

              </div>

          </div>

      </fieldset>
  </div>
 
{% include '@SharedComponents/modules/shared/components/dynamic-form/dynamic-form.twig' %}
 
{
  "variant": "half-width-horizontal",
  "fieldsets": [
    {
      "legend": "Liefermethode",
      "fields": [
        {
          "component": "radio",
          "variant": "light",
          "id": "deliveryMethod-home",
          "name": "deliveryMethod",
          "label": "Heimlieferung",
          "value": "home",
          "required": true,
          "checked": true,
          "disabled": false,
          "error": "",
          "helper": "",
          "attributes": {
            "data-address-form-show": "delivery-address",
            "data-address-form-hide": "invoice-address"
          }
        },
        {
          "component": "radio",
          "variant": "light",
          "id": "deliveryMethod-pickup",
          "name": "deliveryMethod",
          "label": "Pickup beim Händler",
          "value": "pickup",
          "required": true,
          "checked": false,
          "disabled": false,
          "error": "",
          "helper": "",
          "attributes": {
            "data-address-form-show": "invoice-address",
            "data-address-form-hide": "delivery-address"
          }
        }
      ]
    }
  ]
}
  • Content: 
    import './dynamic-form.scss';
import DynamicForm, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/dynamic-form/dynamic-form';

export default DynamicForm;
export const selector = sel;
  • URL: /components/raw/dynamic-form/dynamic-form.js
  • Filesystem Path: src/components/modules/shared/components/dynamic-form/dynamic-form.js
  • Size: 224 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/dynamic-form/dynamic-form";
  • URL: /components/raw/dynamic-form/dynamic-form.scss
  • Filesystem Path: src/components/modules/shared/components/dynamic-form/dynamic-form.scss
  • Size: 126 Bytes

This component was built with a generic pattern. You can pass an array of 1-n elements. These elements can be usual form components like “text-field” or “checkbox”, but there are two special form components:

  • text-field-street-number: Expects two fields with this type in sequence (to show them next to each other)
  • text-field-zip-city: Expects two fields with this type in sequence (to show them next to each other)

Please look into the .config.yml file of the corresponding form component to see which data properties it expects.