<form class="create-edit-address-form">
    <div class="dynamic-form">
        <div class="dynamic-form__message--half-width">
            <div class="message--success">
                <div class="message__container--disabled">
                    <span class="visually-hidden">Success message</span>
                    <div class="message__content">
                        <p class="message__text">Die Addresse wurde erfolgreich gespeichert. <a href="#">Zurück zur Übersicht</a>.</p>
                    </div>
                    <div class="message__close-button">
                        <button class="button-icon--icon-regular -icon-close" type="button" name="close-message" value="yes">
                            <span class="visually-hidden">Schliessen</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <fieldset class="dynamic-form__fieldset--half-width">
            <div class="dynamic-form__element">
                <div class="text-field--light is-initialized">
                    <div class="text-field__wrapper">
                        <input class="text-field__input" id="company" type="text" name="company" required />
                        <label class="text-field__label" for="company">Firma
                            *
                        </label>
                    </div>

                </div>

            </div>

            <div class="dynamic-form__element">
                <div class="select--light is-initialized with-label">
                    <div class="select__wrapper">
                        <select class="select__select" id="salutation" name="salutation" required>

                            <option value="" disabled selected>Bitte wählen</option>
                            <option value="mr">Herr</option>
                            <option value="ms">Frau</option>
                            <option value="other">Andere</option>
                        </select>
                        <label class="select__label" for="salutation">Anrede
                            *
                        </label>
                    </div>

                </div>

            </div>

            <div class="dynamic-form__element">
                <div class="text-field--light is-initialized">
                    <div class="text-field__wrapper">
                        <input class="text-field__input" id="firstName" type="text" name="firstName" required />
                        <label class="text-field__label" for="firstName">Vorname
                            *
                        </label>
                    </div>

                </div>

            </div>

            <div class="dynamic-form__element">
                <div class="text-field--light is-initialized">
                    <div class="text-field__wrapper">
                        <input class="text-field__input" id="LastName" type="text" name="LastName" required />
                        <label class="text-field__label" for="LastName">Nachname
                            *
                        </label>
                    </div>

                </div>

            </div>

            <div class="dynamic-form__element--street-number">
                <div class="text-field--light is-initialized">
                    <div class="text-field__wrapper">
                        <input class="text-field__input" id="street" type="text" name="street" required />
                        <label class="text-field__label" for="street">Strasse
                            *
                        </label>
                    </div>

                </div>

                <div class="text-field--light is-initialized">
                    <div class="text-field__wrapper">
                        <input class="text-field__input" id="street-number" type="text" name="street-number" required />
                        <label class="text-field__label" for="street-number">Nr.
                            *
                        </label>
                    </div>

                </div>

            </div>
            <div class="dynamic-form__element--zip-city">
                <div class="text-field--light is-initialized">
                    <div class="text-field__wrapper">
                        <input class="text-field__input" id="zip" type="text" name="zip" required />
                        <label class="text-field__label" for="zip">PLZ
                            *
                        </label>
                    </div>

                </div>

                <div class="text-field--light is-initialized">
                    <div class="text-field__wrapper">
                        <input class="text-field__input" id="city" type="text" name="city" required />
                        <label class="text-field__label" for="city">Ort
                            *
                        </label>
                    </div>

                </div>

            </div>
            <div class="dynamic-form__element">
                <div class="select--light is-initialized with-label">
                    <div class="select__wrapper">
                        <select class="select__select" id="country" name="country" required>

                            <option value="" disabled selected>Bitte wählen</option>
                            <option value="ch">Schweiz</option>
                            <option value="de">Deutschland</option>
                            <option value="fr">Frankreich</option>
                            <option value="it">Italien</option>
                            <option value="li">Lichtenstein</option>
                        </select>
                        <label class="select__label" for="country">Land
                            *
                        </label>
                    </div>

                </div>

            </div>

        </fieldset>
        <div class="dynamic-form__button-action-row--half-width">
            <button class="button--tertiary-light-small" type="submit">Abbrechen</button>
            <button class="button--primary-small" type="submit">Speichern</button>
        </div>
    </div>
</form>
{% include '@SharedComponents/modules/b2b-account/components/create-edit-address-form/create-edit-address-form.twig' %}
{
  "createEditAddressForm": {
    "variant": "half-width",
    "submitButton": {
      "variant": "primary-small",
      "type": "button",
      "title": "Speichern"
    },
    "cancelButton": {
      "variant": "tertiary-light-small",
      "type": "button",
      "title": "Abbrechen"
    },
    "message": {
      "closeButton": {
        "variant": "icon-regular",
        "title": "Schliessen",
        "icon": "close",
        "type": "button",
        "role": "button",
        "name": "close-message",
        "value": "yes"
      },
      "variant": "success",
      "isHidden": false,
      "labels": {
        "info": "Information message",
        "error": "Error message",
        "warning": "Warning message",
        "success": "Success message"
      },
      "message": "Die Addresse wurde erfolgreich gespeichert. <a href=\"#\">Zurück zur Übersicht</a>.",
      "container": false
    },
    "fieldsets": [
      {
        "fields": [
          {
            "component": "text-field",
            "variant": "light",
            "id": "company",
            "name": "company",
            "label": "Firma",
            "required": true,
            "value": "",
            "disabled": false,
            "type": "text",
            "autocomplete": false,
            "error": "",
            "helper": ""
          },
          {
            "component": "select",
            "variant": "light",
            "id": "salutation",
            "name": "salutation",
            "label": "Anrede",
            "required": true,
            "disabled": false,
            "selected": false,
            "options": {
              "mr": "Herr",
              "ms": "Frau",
              "other": "Andere"
            },
            "choose": "Bitte wählen",
            "error": ""
          },
          {
            "component": "text-field",
            "variant": "light",
            "id": "firstName",
            "name": "firstName",
            "label": "Vorname",
            "required": true,
            "value": "",
            "disabled": false,
            "type": "text",
            "autocomplete": false,
            "error": "",
            "helper": ""
          },
          {
            "component": "text-field",
            "variant": "light",
            "id": "LastName",
            "name": "LastName",
            "label": "Nachname",
            "required": true,
            "value": "",
            "disabled": false,
            "type": "text",
            "autocomplete": false,
            "error": "",
            "helper": ""
          },
          {
            "component": "text-field-street-number",
            "variant": "light",
            "id": "street",
            "name": "street",
            "label": "Strasse",
            "required": true,
            "value": "",
            "disabled": false,
            "type": "text",
            "autocomplete": false,
            "error": ""
          },
          {
            "component": "text-field-street-number",
            "variant": "light",
            "id": "street-number",
            "name": "street-number",
            "label": "Nr.",
            "required": true,
            "value": "",
            "disabled": false,
            "type": "text",
            "autocomplete": false,
            "error": ""
          },
          {
            "component": "text-field-zip-city",
            "variant": "light",
            "id": "zip",
            "name": "zip",
            "label": "PLZ",
            "required": true,
            "value": "",
            "disabled": false,
            "type": "text",
            "autocomplete": false,
            "error": ""
          },
          {
            "component": "text-field-zip-city",
            "variant": "light",
            "id": "city",
            "name": "city",
            "label": "Ort",
            "required": true,
            "value": "",
            "disabled": false,
            "type": "text",
            "autocomplete": false,
            "error": ""
          },
          {
            "component": "select",
            "variant": "light",
            "id": "country",
            "name": "country",
            "label": "Land",
            "required": true,
            "disabled": false,
            "selected": false,
            "options": {
              "ch": "Schweiz",
              "de": "Deutschland",
              "fr": "Frankreich",
              "it": "Italien",
              "li": "Lichtenstein"
            },
            "choose": "Bitte wählen",
            "error": ""
          }
        ]
      }
    ]
  }
}
  • Content:
    @import "~shared/base";
    @import "~cando-cx-components-library/components/modules/b2b-account/components/create-edit-address-form/create-edit-address-form";
  • URL: /components/raw/create-edit-address-form/create-edit-address-form.scss
  • Filesystem Path: src/components/modules/b2b-account/components/create-edit-address-form/create-edit-address-form.scss
  • Size: 155 Bytes

No notes defined.