No notes defined.
<!-- Default -->
<fieldset class="formFieldset">
<legend class="formFieldset-legend">Ich bin ein Abschnitt</legend>
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
</fieldset>
<!-- With Notes -->
<fieldset class="formFieldset">
<legend class="formFieldset-legend">Ich bin ein Abschnitt</legend>
<div class="formFieldset-notes">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
</fieldset>
<!-- Without Legend -->
<fieldset class="formFieldset">
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
</fieldset>
<!-- With Buttons -->
<fieldset class="formFieldset">
<legend class="formFieldset-legend">Ich bin ein Abschnitt</legend>
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
<div class="buttonGroup">
<button class="button is-secondary"><span class="button-label">Abbrechen</span></button>
<button class="button" type="submit"><span class="button-label">Absenden</span></button>
</div>
</fieldset>
<!-- Doc Only -->
<section class="doc-section">
<div class="doc-header">
<h2 class="doc-header-title">Varianten</h2>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Default</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="formField-flexbox">
<fieldset class="formFieldset">
<legend class="formFieldset-legend">Ich bin ein Abschnitt</legend>
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">With Notes</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="formField-flexbox">
<fieldset class="formFieldset">
<legend class="formFieldset-legend">Ich bin ein Abschnitt</legend>
<div class="formFieldset-notes">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Without Legend</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="formField-flexbox">
<fieldset class="formFieldset">
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">With Buttons</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="formField-flexbox">
<fieldset class="formFieldset">
<legend class="formFieldset-legend">Ich bin ein Abschnitt</legend>
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
<div class="buttonGroup">
<button class="button is-secondary"><span class="button-label">Abbrechen</span></button>
<button class="button" type="submit"><span class="button-label">Absenden</span></button>
</div>
</fieldset>
</div>
</div>
</section>
<section class="doc-section">
<div class="doc-header">
<h2 class="doc-header-title">Layouts</h2>
<div class="doc-header-notes">
Über das Daten-Attribut „data-width“ kann die Breite der Formularfelder definiert werden. Dabei wird der verbleibende Platz automatisch durch das folgende Formularfeld gefüllt, außer dies hat selbst eine definierte Breite. Um den verbleibenden Platz nicht zu füllen, muss das folgende Formularfeld die Breite "1/1" haben.
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">One Half</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-width="1/2"]</li>
</ul>
</div>
</header>
<div class="formField-flexbox">
<fieldset class="formFieldset">
<div class="formFieldset-fields">
<div class="formFieldset-field" data-width="1/2">
<div class="formField is-required">
<label class="label is-required" for="field-id">Vorname</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formField is-required">
<label class="label is-required" for="field-id">Nachname</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">One Third – One Third</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-width="1/1"]</li>
</ul>
</div>
</header>
<div class="formField-flexbox">
<fieldset class="formFieldset">
<div class="formFieldset-fields">
<div class="formFieldset-field" data-width="1/3">
<div class="formSelect is-required">
<label class="label is-required" for="field-select">Option A</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select" required="">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field" data-width="1/3">
<div class="formSelect is-required">
<label class="label is-required" for="field-select">Option B</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select" required="">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect is-required">
<label class="label is-required" for="field-select">Option C</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select" required="">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">One Forth</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-width="1/4"]</li>
</ul>
</div>
</header>
<div class="formField-flexbox">
<fieldset class="formFieldset">
<div class="formFieldset-fields">
<div class="formFieldset-field" data-width="1/4">
<div class="formField is-required">
<label class="label is-required" for="field-id">Postleitzahl</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formField is-required">
<label class="label is-required" for="field-id">Ort</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Three Forth</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-width="3/4"]</li>
</ul>
</div>
</header>
<div class="formField-flexbox">
<fieldset class="formFieldset">
<div class="formFieldset-fields">
<div class="formFieldset-field" data-width="3/4">
<div class="formField is-required">
<label class="label is-required" for="field-id">Straße</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formField is-required">
<label class="label is-required" for="field-id">Hausnummer</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">One Forth – A Whole</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>[data-width="3/4"] + [data-width="1/1"]</li>
</ul>
</div>
</header>
<div class="formField-flexbox">
<fieldset class="formFieldset">
<div class="formFieldset-fields">
<div class="formFieldset-field" data-width="1/4">
<div class="formSelect is-required">
<label class="label is-required" for="field-select">Anrede</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select" required="">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field" data-width="1/1">
<div class="formField is-required">
<label class="label is-required" for="field-id">Vollständiger Name</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" required="" aria-required="true" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</section>
<!-- Default -->
<fieldset class="formFieldset{{#modifier}} {{.}}{{/modifier}}">
{{#legend}}<legend class="formFieldset-legend">{{{.}}}</legend>{{/legend}}
{{#notes}}
<div class="formFieldset-notes">
{{{.}}}
</div>
{{/notes}}
{{#if fields}}
<div class="formFieldset-fields">
{{#fields}}
<div class="formFieldset-field"{{#width}} data-width="{{.}}"{{/width}}>
{{#formfield}}
{{render '@formfield' (contextData '@formfieldset' this) merge=true}}
{{/formfield}}
{{#formhidden}}
{{render '@formhidden' (contextData '@formfieldset' this) merge=true}}
{{/formhidden}}
{{#formselect}}
{{render '@formselect' (contextData '@formfieldset' this) merge=true}}
{{/formselect}}
{{#formtextarea}}
{{render '@formtextarea' (contextData '@formfieldset' this) merge=true}}
{{/formtextarea}}
{{#formtoggle}}
{{render '@formtoggle' (contextData '@formfieldset' this) merge=true}}
{{/formtoggle}}
{{#formtoggleset}}
{{render '@formtoggleset' (contextData '@formfieldset' this) merge=true}}
{{/formtoggleset}}
{{#formnote}}
<div class="formFieldset-note">
{{#label}}
<strong class="label">{{{.}}}</strong>
{{/label}}
{{#content}}
{{{.}}}
{{/content}}
</div>
{{/formnote}}
</div>
{{/fields}}
</div>
{{/if}}
{{#buttongroup}}
{{render '@buttongroup' (contextData '@formfieldset' this) merge=false}}
{{/buttongroup}}
</fieldset>
<!-- With Notes -->
<fieldset class="formFieldset{{#modifier}} {{.}}{{/modifier}}">
{{#legend}}<legend class="formFieldset-legend">{{{.}}}</legend>{{/legend}}
{{#notes}}
<div class="formFieldset-notes">
{{{.}}}
</div>
{{/notes}}
{{#if fields}}
<div class="formFieldset-fields">
{{#fields}}
<div class="formFieldset-field"{{#width}} data-width="{{.}}"{{/width}}>
{{#formfield}}
{{render '@formfield' (contextData '@formfieldset' this) merge=true}}
{{/formfield}}
{{#formhidden}}
{{render '@formhidden' (contextData '@formfieldset' this) merge=true}}
{{/formhidden}}
{{#formselect}}
{{render '@formselect' (contextData '@formfieldset' this) merge=true}}
{{/formselect}}
{{#formtextarea}}
{{render '@formtextarea' (contextData '@formfieldset' this) merge=true}}
{{/formtextarea}}
{{#formtoggle}}
{{render '@formtoggle' (contextData '@formfieldset' this) merge=true}}
{{/formtoggle}}
{{#formtoggleset}}
{{render '@formtoggleset' (contextData '@formfieldset' this) merge=true}}
{{/formtoggleset}}
{{#formnote}}
<div class="formFieldset-note">
{{#label}}
<strong class="label">{{{.}}}</strong>
{{/label}}
{{#content}}
{{{.}}}
{{/content}}
</div>
{{/formnote}}
</div>
{{/fields}}
</div>
{{/if}}
{{#buttongroup}}
{{render '@buttongroup' (contextData '@formfieldset' this) merge=false}}
{{/buttongroup}}
</fieldset>
<!-- Without Legend -->
<fieldset class="formFieldset{{#modifier}} {{.}}{{/modifier}}">
{{#legend}}<legend class="formFieldset-legend">{{{.}}}</legend>{{/legend}}
{{#notes}}
<div class="formFieldset-notes">
{{{.}}}
</div>
{{/notes}}
{{#if fields}}
<div class="formFieldset-fields">
{{#fields}}
<div class="formFieldset-field"{{#width}} data-width="{{.}}"{{/width}}>
{{#formfield}}
{{render '@formfield' (contextData '@formfieldset' this) merge=true}}
{{/formfield}}
{{#formhidden}}
{{render '@formhidden' (contextData '@formfieldset' this) merge=true}}
{{/formhidden}}
{{#formselect}}
{{render '@formselect' (contextData '@formfieldset' this) merge=true}}
{{/formselect}}
{{#formtextarea}}
{{render '@formtextarea' (contextData '@formfieldset' this) merge=true}}
{{/formtextarea}}
{{#formtoggle}}
{{render '@formtoggle' (contextData '@formfieldset' this) merge=true}}
{{/formtoggle}}
{{#formtoggleset}}
{{render '@formtoggleset' (contextData '@formfieldset' this) merge=true}}
{{/formtoggleset}}
{{#formnote}}
<div class="formFieldset-note">
{{#label}}
<strong class="label">{{{.}}}</strong>
{{/label}}
{{#content}}
{{{.}}}
{{/content}}
</div>
{{/formnote}}
</div>
{{/fields}}
</div>
{{/if}}
{{#buttongroup}}
{{render '@buttongroup' (contextData '@formfieldset' this) merge=false}}
{{/buttongroup}}
</fieldset>
<!-- With Buttons -->
<fieldset class="formFieldset{{#modifier}} {{.}}{{/modifier}}">
{{#legend}}<legend class="formFieldset-legend">{{{.}}}</legend>{{/legend}}
{{#notes}}
<div class="formFieldset-notes">
{{{.}}}
</div>
{{/notes}}
{{#if fields}}
<div class="formFieldset-fields">
{{#fields}}
<div class="formFieldset-field"{{#width}} data-width="{{.}}"{{/width}}>
{{#formfield}}
{{render '@formfield' (contextData '@formfieldset' this) merge=true}}
{{/formfield}}
{{#formhidden}}
{{render '@formhidden' (contextData '@formfieldset' this) merge=true}}
{{/formhidden}}
{{#formselect}}
{{render '@formselect' (contextData '@formfieldset' this) merge=true}}
{{/formselect}}
{{#formtextarea}}
{{render '@formtextarea' (contextData '@formfieldset' this) merge=true}}
{{/formtextarea}}
{{#formtoggle}}
{{render '@formtoggle' (contextData '@formfieldset' this) merge=true}}
{{/formtoggle}}
{{#formtoggleset}}
{{render '@formtoggleset' (contextData '@formfieldset' this) merge=true}}
{{/formtoggleset}}
{{#formnote}}
<div class="formFieldset-note">
{{#label}}
<strong class="label">{{{.}}}</strong>
{{/label}}
{{#content}}
{{{.}}}
{{/content}}
</div>
{{/formnote}}
</div>
{{/fields}}
</div>
{{/if}}
{{#buttongroup}}
{{render '@buttongroup' (contextData '@formfieldset' this) merge=false}}
{{/buttongroup}}
</fieldset>
<!-- Doc Only -->
{{#sections}}
<section class="doc-section">
<div class="doc-header">
{{#title}}
<h2 class="doc-header-title">{{{.}}}</h2>
{{/title}}
{{#if attributes}}
<div class="doc-header-configuration">
<ul data-label="Attributes">
{{#attributes}}
<li>{{{.}}}</li>
{{/attributes}}
</ul>
</div>
{{/if}}
{{#notes}}
<div class="doc-header-notes">
{{{.}}}
</div>
{{/notes}}
</div>
{{#variants}}
<div class="doc-variant">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
</header>
<div class="formField-flexbox">
{{#samples}}
{{render '@formfieldset' (contextData '@formfieldset' this) merge=true}}
{{/samples}}
</div>
</div>
{{/variants}}
</section>
{{/sections}}
/* Default */
{
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
]
}
/* With Notes */
{
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
],
"notes": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
/* Without Legend */
{
"legend": null,
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
]
}
/* With Buttons */
{
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
],
"buttongroup": {
"buttons": [
{
"label": "Abbrechen",
"modifier": "is-secondary"
},
{
"type": "submit",
"label": "Absenden"
}
]
}
}
/* Doc Only */
{
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
],
"sections": [
{
"title": "Varianten",
"variants": [
{
"title": "Default",
"samples": {
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
]
}
},
{
"title": "With Notes",
"samples": {
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
],
"notes": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
},
{
"title": "Without Legend",
"samples": {
"legend": null,
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
]
}
},
{
"title": "With Buttons",
"samples": {
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
],
"buttongroup": {
"buttons": [
{
"label": "Abbrechen",
"modifier": "is-secondary"
},
{
"type": "submit",
"label": "Absenden"
}
]
}
}
}
]
},
{
"title": "Layouts",
"notes": "Über das Daten-Attribut „data-width“ kann die Breite der Formularfelder definiert werden. Dabei wird der verbleibende Platz automatisch durch das folgende Formularfeld gefüllt, außer dies hat selbst eine definierte Breite. Um den verbleibenden Platz nicht zu füllen, muss das folgende Formularfeld die Breite \"1/1\" haben.",
"variants": [
{
"title": "One Half",
"modifiers": [
"[data-width=\"1/2\"]"
],
"samples": {
"legend": null,
"fields": [
{
"width": "1/2",
"formfield": {
"is-required": true,
"label": "Vorname"
}
},
{
"formfield": {
"is-required": true,
"label": "Nachname"
}
}
]
}
},
{
"title": "One Third – One Third",
"modifiers": [
"[data-width=\"1/1\"]"
],
"samples": {
"legend": null,
"fields": [
{
"width": "1/3",
"formselect": {
"label": "Option A",
"is-required": true
}
},
{
"width": "1/3",
"formselect": {
"label": "Option B",
"is-required": true
}
},
{
"formselect": {
"label": "Option C",
"is-required": true
}
}
]
}
},
{
"title": "One Forth",
"modifiers": [
"[data-width=\"1/4\"]"
],
"samples": {
"legend": null,
"fields": [
{
"width": "1/4",
"formfield": {
"is-required": true,
"label": "Postleitzahl"
}
},
{
"formfield": {
"is-required": true,
"label": "Ort"
}
}
]
}
},
{
"title": "Three Forth",
"modifiers": [
"[data-width=\"3/4\"]"
],
"samples": {
"legend": null,
"fields": [
{
"width": "3/4",
"formfield": {
"is-required": true,
"label": "Straße"
}
},
{
"formfield": {
"is-required": true,
"label": "Hausnummer"
}
}
]
}
},
{
"title": "One Forth – A Whole",
"modifiers": [
"[data-width=\"3/4\"] + [data-width=\"1/1\"]"
],
"samples": {
"legend": null,
"fields": [
{
"width": "1/4",
"formselect": {
"is-required": true,
"label": "Anrede"
}
},
{
"width": "1/1",
"formfield": {
"is-required": true,
"label": "Vollständiger Name"
}
}
]
}
}
]
}
]
}
@import "_formFieldset.settings";
@import "_formFieldset.styles";
%formFieldset {
&-fields + .buttonGroup {
padding-top: calc(#{$formFieldset_gutter} - #{$formFieldset_stack-spacing});
}
&-note {
@extend %richtext;
.label {
@include stack-spacing(0);
}
}
}
.formFieldset {
&-note {
@extend %formFieldset-note;
}
}
$formFieldset_gutter: var(--bp) !default;
$formFieldset_stack-spacing: var(--sp) !default;
%formFieldset {
border: none;
@extend %card;
overflow: visible;
@include stack-spacing(component);
margin-left: 0;
margin-right: 0;
display: flex;
flex-direction: column;
row-gap: $formFieldset_stack-spacing;
width: 100%;
> * {
margin-top: 0 !important;
}
&-legend {
@extend %heading;
// Display inside of box
width: 100%;
float: left;
margin: 0;
padding: 0;
margin-bottom: calc(var(--sp) - #{$formFieldset_stack-spacing});
}
&-notes {
@extend %richtext;
> *:first-child {
@include stack-spacing(0);
}
}
&-fields {
display: flex;
column-gap: $formFieldset_gutter;
row-gap: $formFieldset_stack-spacing;
flex-wrap: wrap;
}
&-field {
flex: 1 0 100%;
& > * {
margin-top: 0 !important;
}
}
@include only-on-desktop() {
&-field {
$variants: (
full-width: (
modifier: "1/1",
value: 1,
),
one-half: (
modifier: "1/2",
value: .5,
),
one-third: (
modifier: "1/3",
value: math.div(1, 3),
),
two-third: (
modifier: "2/3",
value: math.div(2, 3),
),
one-fourth: (
modifier: "1/4",
value: math.div(1, 4),
),
three-fourth: (
modifier: "3/4",
value: math.div(3, 4),
),
);
@each $name, $variant in $variants {
$modifier: map.get($variant, modifier);
$value: map.get($variant, value);
&[data-width="#{$modifier}"]{
@if $value != 1 {
flex: 0 0 calc((100% + #{$formFieldset_gutter}) * #{$value} - #{$formFieldset_gutter});
& + %formFieldset-field:not([data-width]) {
flex: 1 0;
}
} @else {
flex: 1 0 100%;
}
}
}
}
}
.buttonGroup {
@include stack-spacing(large);
justify-content: flex-end;
}
}
.formFieldset {
@extend %formFieldset;
&-legend {
@extend %formFieldset-legend;
}
&-notes {
@extend %formFieldset-notes;
}
&-fields {
@extend %formFieldset-fields;
}
&-field {
@extend %formFieldset-field;
}
}