<div class="dynamic-form">
<fieldset class="dynamic-form__fieldset--half-width">
<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>
</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">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="mail" type="email" name="mail" required />
<label class="text-field__label" for="mail">E-Mail Adresse
*
</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 is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="country" name="country" required>
<option value="" disabled>Bitte wählen</option>
<option value="ch" selected="selected">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>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="mail-confirmation" type="email" name="mail-confirmation" required />
<label class="text-field__label" for="mail-confirmation">E-Mail Adresse bestätigen
*
</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="password" type="password" name="password" required />
<label class="text-field__label" for="password">Passwort
*
</label>
</div>
<div class="text-field__helper">
<div class="text-field__helper--text">8 Zeichen, mind. eine Zahl, mind. ein Sonderzeichen</div>
</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="password-confirmation" type="password" name="password-confirmation" required />
<label class="text-field__label" for="password-confirmation">Passwort bestätigen
*
</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="language" name="language" required>
<option value="" disabled selected>Bitte wählen</option>
<option value="de">Deutsch</option>
<option value="fr">Français</option>
<option value="it">Italiano</option>
</select>
<label class="select__label" for="language">Sprache
*
</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="business" name="business" required>
<option value="" disabled selected>Bitte wählen</option>
<option value="hair">Hair</option>
<option value="nail">Nail</option>
<option value="cosmetics">Cosmetics</option>
<option value="feet">Feet</option>
</select>
<label class="select__label" for="business">Branche
*
</label>
</div>
</div>
</div>
</fieldset>
</div>
{% include '@SharedComponents/modules/shared/components/dynamic-form/dynamic-form.twig' %}
{
"variant": "half-width",
"fields": [
{
"component": "select",
"variant": "light",
"id": "salutation",
"name": "salutation",
"label": "Anrede",
"required": true,
"disabled": false,
"selected": false,
"options": {
"mr": "Herr",
"ms": "Frau"
},
"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": ""
},
{
"component": "text-field",
"variant": "light",
"id": "lastName",
"name": "lastName",
"label": "Nachname",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "mail",
"name": "mail",
"label": "E-Mail Adresse",
"required": true,
"value": "",
"disabled": false,
"type": "email",
"autocomplete": false
},
{
"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": "ch",
"options": {
"ch": "Schweiz",
"de": "Deutschland",
"fr": "Frankreich",
"it": "Italien",
"li": "Lichtenstein"
},
"choose": "Bitte wählen",
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "mail-confirmation",
"name": "mail-confirmation",
"label": "E-Mail Adresse bestätigen",
"required": true,
"value": "",
"disabled": false,
"type": "email",
"autocomplete": false
},
{
"component": "text-field",
"variant": "light",
"id": "password",
"name": "password",
"label": "Passwort",
"required": true,
"value": "",
"disabled": false,
"type": "password",
"autocomplete": false,
"helper": "8 Zeichen, mind. eine Zahl, mind. ein Sonderzeichen"
},
{
"component": "text-field",
"variant": "light",
"id": "password-confirmation",
"name": "password-confirmation",
"label": "Passwort bestätigen",
"required": true,
"value": "",
"disabled": false,
"type": "password",
"autocomplete": false
},
{
"component": "select",
"variant": "light",
"id": "language",
"name": "language",
"label": "Sprache",
"required": true,
"disabled": false,
"selected": false,
"options": {
"de": "Deutsch",
"fr": "Français",
"it": "Italiano"
},
"choose": "Bitte wählen",
"error": ""
},
{
"component": "select",
"variant": "light",
"id": "business",
"name": "business",
"label": "Branche",
"required": true,
"disabled": false,
"selected": false,
"options": {
"hair": "Hair",
"nail": "Nail",
"cosmetics": "Cosmetics",
"feet": "Feet"
},
"choose": "Bitte wählen",
"error": ""
}
]
}
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;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/dynamic-form/dynamic-form";
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:
Please look into the .config.yml file of the corresponding form component to see which data properties it expects.