No notes defined.
<!-- Default -->
<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>
<!-- Valid -->
<fieldset class="formToggleSet is-required" data-invalid="false">
<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">
Ich bin erfolgreich geprüft.
</div>
</fieldset>
<!-- Invalid -->
<fieldset class="formToggleSet is-required" data-invalid="true">
<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">
Ich bin die Fehlerbeschreibung.
</div>
</fieldset>
<!-- Disabled -->
<fieldset class="formToggleSet is-optional" disabled="disabled">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group-disabled[]" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group-disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group-disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Dieses Angaben können nicht geändert werden.
</div>
</fieldset>
<!-- Single Item -->
<fieldset class="formToggleSet is-required">
<legend class="formToggleSet-label">Datenschutzhinweise</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>Hiermit akzeptiere ich die <a href="#">Datenschutzbestimmungen</a>.</span></label>
</div>
</div>
</div>
</fieldset>
<!-- Stacked -->
<fieldset class="formToggleSet is-stacked is-optional">
<legend class="formToggleSet-label">Vertikal angeordneten 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>
<!-- Radiobuttons -->
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Alternativen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Sie können nur eine Option auswählen.
</div>
</fieldset>
<!-- Radiobuttons Valid -->
<fieldset class="formToggleSet is-required" data-invalid="false">
<legend class="formToggleSet-label">Gruppe mit Alternativen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--valid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--valid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--valid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Ich bin erfolgreich geprüft.
</div>
</fieldset>
<!-- Radiobuttons Invalid -->
<fieldset class="formToggleSet is-required" data-invalid="true">
<legend class="formToggleSet-label">Gruppe mit Alternativen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--invalid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--invalid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--invalid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Ich bin die Fehlerbeschreibung.
</div>
</fieldset>
<!-- Radiobuttons Disabled -->
<fieldset class="formToggleSet is-optional" disabled="disabled">
<legend class="formToggleSet-label">Gruppe mit Alternativen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--disabled[]" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Dieses Angaben können nicht geändert werden.
</div>
</fieldset>
<!-- Radiobuttons Stacked -->
<fieldset class="formToggleSet is-stacked is-optional">
<legend class="formToggleSet-label">Vertikal angeordnete Alternativen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--stacked[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--stacked[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--stacked[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Sie können nur eine Option auswählen.
</div>
</fieldset>
<!-- Switches -->
<fieldset class="formToggleSet is-stacked is-optional">
<legend class="formToggleSet-label">Gruppe mit Einstellungen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" checked="checked" /><span class="toggle-marker"></span>
</span>
<span>Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Andere Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Weitere Einstellung aktivieren</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
<!-- Switches Valid -->
<fieldset class="formToggleSet is-stacked is-required" data-invalid="false">
<legend class="formToggleSet-label">Gruppe mit Einstellungen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" checked="checked" /><span class="toggle-marker"></span>
</span>
<span>Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Andere Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Weitere Einstellung aktivieren</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
<!-- Switches Invalid -->
<fieldset class="formToggleSet is-stacked is-required" data-invalid="true">
<legend class="formToggleSet-label">Gruppe mit Einstellungen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" checked="checked" /><span class="toggle-marker"></span>
</span>
<span>Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Andere Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Weitere Einstellung aktivieren</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
<!-- Switches Disabled -->
<fieldset class="formToggleSet is-stacked is-optional" disabled="disabled">
<legend class="formToggleSet-label">Gruppe mit Einstellungen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled is-switch">
<label class="formToggle-label is-optional is-switch" data-disabled="true"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches--disabled[]" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled is-switch">
<label class="formToggle-label is-optional is-switch" data-disabled="true"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches--disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Andere Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled is-switch">
<label class="formToggle-label is-optional is-switch" data-disabled="true"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches--disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Weitere Einstellung aktivieren</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Dieses Angaben können nicht geändert werden.
</div>
</fieldset>
<!-- Doc Only -->
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Checkboxes</h2>
<div class="doc-variant-configuration">
<div class="doc-variant-controller"></div>
</div>
</header>
<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>
<fieldset class="formToggleSet is-required" data-invalid="false">
<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">
Ich bin erfolgreich geprüft.
</div>
</fieldset>
<fieldset class="formToggleSet is-required" data-invalid="true">
<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">
Ich bin die Fehlerbeschreibung.
</div>
</fieldset>
<fieldset class="formToggleSet is-optional" disabled="disabled">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group-disabled[]" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group-disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group-disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Dieses Angaben können nicht geändert werden.
</div>
</fieldset>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Stacked Checkboxes</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-stacked</li>
</ul>
<div class="doc-variant-controller"></div>
</div>
</header>
<fieldset class="formToggleSet is-stacked is-optional">
<legend class="formToggleSet-label">Vertikal angeordneten 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>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Single Checkbox</h2>
<div class="doc-variant-configuration">
<div class="doc-variant-controller"></div>
</div>
</header>
<fieldset class="formToggleSet is-required">
<legend class="formToggleSet-label">Datenschutzhinweise</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>Hiermit akzeptiere ich die <a href="#">Datenschutzbestimmungen</a>.</span></label>
</div>
</div>
</div>
</fieldset>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Radio Buttons</h2>
<div class="doc-variant-configuration">
<div class="doc-variant-controller"></div>
</div>
</header>
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Alternativen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Sie können nur eine Option auswählen.
</div>
</fieldset>
<fieldset class="formToggleSet is-required" data-invalid="false">
<legend class="formToggleSet-label">Gruppe mit Alternativen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--valid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--valid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--valid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Ich bin erfolgreich geprüft.
</div>
</fieldset>
<fieldset class="formToggleSet is-required" data-invalid="true">
<legend class="formToggleSet-label">Gruppe mit Alternativen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--invalid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--invalid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--invalid[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Ich bin die Fehlerbeschreibung.
</div>
</fieldset>
<fieldset class="formToggleSet is-optional" disabled="disabled">
<legend class="formToggleSet-label">Gruppe mit Alternativen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--disabled[]" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional is-disabled">
<label class="formToggle-label is-optional" data-disabled="true"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Dieses Angaben können nicht geändert werden.
</div>
</fieldset>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Stacked Radio Buttons</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-stacked</li>
</ul>
<div class="doc-variant-controller"></div>
</div>
</header>
<fieldset class="formToggleSet is-stacked is-optional">
<legend class="formToggleSet-label">Vertikal angeordnete Alternativen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--stacked[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 1</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--stacked[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 2</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-radio is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-radio">
<input class="toggle-input" role="switch" type="radio" name="radiobuttons--stacked[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Option 3</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Sie können nur eine Option auswählen.
</div>
</fieldset>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Switches</h2>
<div class="doc-variant-configuration">
<div class="doc-variant-controller"></div>
</div>
</header>
<fieldset class="formToggleSet is-stacked is-optional">
<legend class="formToggleSet-label">Gruppe mit Einstellungen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" checked="checked" /><span class="toggle-marker"></span>
</span>
<span>Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Andere Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Weitere Einstellung aktivieren</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
<fieldset class="formToggleSet is-stacked is-required" data-invalid="false">
<legend class="formToggleSet-label">Gruppe mit Einstellungen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" checked="checked" /><span class="toggle-marker"></span>
</span>
<span>Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Andere Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Weitere Einstellung aktivieren</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
<fieldset class="formToggleSet is-stacked is-required" data-invalid="true">
<legend class="formToggleSet-label">Gruppe mit Einstellungen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" checked="checked" /><span class="toggle-marker"></span>
</span>
<span>Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Andere Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-switch">
<label class="formToggle-label is-optional is-switch"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Weitere Einstellung aktivieren</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
<fieldset class="formToggleSet is-stacked is-optional" disabled="disabled">
<legend class="formToggleSet-label">Gruppe mit Einstellungen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled is-switch">
<label class="formToggle-label is-optional is-switch" data-disabled="true"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches--disabled[]" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled is-switch">
<label class="formToggle-label is-optional is-switch" data-disabled="true"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches--disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Andere Einstellung aktivieren</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional is-disabled is-switch">
<label class="formToggle-label is-optional is-switch" data-disabled="true"><span class="toggle is-checkbox is-switch">
<input class="toggle-input" role="switch" type="checkbox" name="switches--disabled[]" value="" disabled="disabled" /><span class="toggle-marker"></span>
</span>
<span>Weitere Einstellung aktivieren</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Dieses Angaben können nicht geändert werden.
</div>
</fieldset>
</section>
<!-- Default -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Valid -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Invalid -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Disabled -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Single Item -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Stacked -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Radiobuttons -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Radiobuttons Valid -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Radiobuttons Invalid -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Radiobuttons Disabled -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Radiobuttons Stacked -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Switches -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Switches Valid -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Switches Invalid -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Switches Disabled -->
<fieldset class="formToggleSet{{#if is-stacked}} is-stacked{{/if}}{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
{{#label}}
<legend class="formToggleSet-label">{{{.}}}</legend>
{{/label}}
<div class="formToggleSet-options">
{{#options}}
<div class="formToggleSet-option">
{{> @formtoggle}}
</div>
{{/options}}
</div>
{{#message}}
{{render '@formmessage' (contextData '@formtoggleset' this) merge=true}}
{{/message}}
</fieldset>
<!-- Doc Only -->
{{#variants}}
<section class="doc-variant{{#if narrow-preview}} doc-narrow-content{{/if}}"{{#id}} id="{{.}}"{{/id}}>
<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 class="doc-variant-controller"></div>
</div>
</header>
{{#samples}}
{{render '@formtoggleset' (contextData '@formtoggleset' this) merge=true}}
{{/samples}}
</section>
{{/variants}}
/* Default */
{
"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"
}
]
}
/* Valid */
{
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Ich bin erfolgreich geprüft."
},
"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"
}
],
"is-required": true,
"is-valid": true
}
/* Invalid */
{
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Ich bin die Fehlerbeschreibung."
},
"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"
}
],
"is-required": true,
"is-invalid": true
}
/* Disabled */
{
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Dieses Angaben können nicht geändert werden."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group-disabled[]",
"is-checked": true,
"is-disabled": true,
"label": "Option 1"
},
{
"type": "checkbox",
"name": "checkbox-group-disabled[]",
"is-disabled": true,
"label": "Option 2"
},
{
"type": "checkbox",
"name": "checkbox-group-disabled[]",
"is-disabled": true,
"label": "Option 3"
}
],
"is-disabled": true
}
/* Single Item */
{
"type": "checkbox-group",
"label": "Datenschutzhinweise",
"message": null,
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Hiermit akzeptiere ich die <a href=\"#\">Datenschutzbestimmungen</a>."
}
],
"is-required": true
}
/* Stacked */
{
"type": "checkbox-group",
"label": "Vertikal angeordneten 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"
}
],
"is-stacked": true
}
/* Radiobuttons */
{
"type": "checkbox-group",
"label": "Gruppe mit Alternativen",
"message": {
"content": "Sie können nur eine Option auswählen."
},
"options": [
{
"type": "radio",
"name": "radiobuttons[]",
"label": "Option 1"
},
{
"type": "radio",
"name": "radiobuttons[]",
"label": "Option 2"
},
{
"type": "radio",
"name": "radiobuttons[]",
"label": "Option 3"
}
]
}
/* Radiobuttons Valid */
{
"type": "checkbox-group",
"label": "Gruppe mit Alternativen",
"message": {
"content": "Ich bin erfolgreich geprüft."
},
"options": [
{
"type": "radio",
"name": "radiobuttons--valid[]",
"label": "Option 1"
},
{
"type": "radio",
"name": "radiobuttons--valid[]",
"label": "Option 2"
},
{
"type": "radio",
"name": "radiobuttons--valid[]",
"label": "Option 3"
}
],
"is-required": true,
"is-valid": true
}
/* Radiobuttons Invalid */
{
"type": "checkbox-group",
"label": "Gruppe mit Alternativen",
"message": {
"content": "Ich bin die Fehlerbeschreibung."
},
"options": [
{
"type": "radio",
"name": "radiobuttons--invalid[]",
"label": "Option 1"
},
{
"type": "radio",
"name": "radiobuttons--invalid[]",
"label": "Option 2"
},
{
"type": "radio",
"name": "radiobuttons--invalid[]",
"label": "Option 3"
}
],
"is-required": true,
"is-invalid": true
}
/* Radiobuttons Disabled */
{
"type": "checkbox-group",
"label": "Gruppe mit Alternativen",
"message": {
"content": "Dieses Angaben können nicht geändert werden."
},
"options": [
{
"is-disabled": true,
"is-checked": true,
"type": "radio",
"name": "radiobuttons--disabled[]",
"label": "Option 1"
},
{
"is-disabled": true,
"type": "radio",
"name": "radiobuttons--disabled[]",
"label": "Option 2"
},
{
"is-disabled": true,
"type": "radio",
"name": "radiobuttons--disabled[]",
"label": "Option 3"
}
],
"is-disabled": true
}
/* Radiobuttons Stacked */
{
"type": "checkbox-group",
"label": "Vertikal angeordnete Alternativen",
"message": {
"content": "Sie können nur eine Option auswählen."
},
"options": [
{
"type": "radio",
"name": "radiobuttons--stacked[]",
"label": "Option 1"
},
{
"type": "radio",
"name": "radiobuttons--stacked[]",
"label": "Option 2"
},
{
"type": "radio",
"name": "radiobuttons--stacked[]",
"label": "Option 3"
}
],
"is-stacked": true
}
/* Switches */
{
"type": "checkbox-group",
"label": "Gruppe mit Einstellungen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"modifier": "is-switch",
"is-checked": true,
"name": "switches[]",
"label": "Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Andere Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Weitere Einstellung aktivieren"
}
],
"is-stacked": true
}
/* Switches Valid */
{
"type": "checkbox-group",
"label": "Gruppe mit Einstellungen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"modifier": "is-switch",
"is-checked": true,
"name": "switches[]",
"label": "Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Andere Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Weitere Einstellung aktivieren"
}
],
"is-required": true,
"is-valid": true,
"is-stacked": true
}
/* Switches Invalid */
{
"type": "checkbox-group",
"label": "Gruppe mit Einstellungen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"modifier": "is-switch",
"is-checked": true,
"name": "switches[]",
"label": "Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Andere Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Weitere Einstellung aktivieren"
}
],
"is-required": true,
"is-invalid": true,
"is-stacked": true
}
/* Switches Disabled */
{
"type": "checkbox-group",
"label": "Gruppe mit Einstellungen",
"message": {
"content": "Dieses Angaben können nicht geändert werden."
},
"options": [
{
"type": "checkbox",
"modifier": "is-switch",
"is-disabled": true,
"is-checked": true,
"name": "switches--disabled[]",
"label": "Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"is-disabled": true,
"name": "switches--disabled[]",
"label": "Andere Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"is-disabled": true,
"name": "switches--disabled[]",
"label": "Weitere Einstellung aktivieren"
}
],
"is-disabled": true,
"is-stacked": true
}
/* Doc Only */
{
"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"
}
],
"variants": [
{
"title": "Checkboxes",
"samples": [
{
"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"
}
]
},
{
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Ich bin erfolgreich geprüft."
},
"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"
}
],
"is-required": true,
"is-valid": true
},
{
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Ich bin die Fehlerbeschreibung."
},
"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"
}
],
"is-required": true,
"is-invalid": true
},
{
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Dieses Angaben können nicht geändert werden."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group-disabled[]",
"is-checked": true,
"is-disabled": true,
"label": "Option 1"
},
{
"type": "checkbox",
"name": "checkbox-group-disabled[]",
"is-disabled": true,
"label": "Option 2"
},
{
"type": "checkbox",
"name": "checkbox-group-disabled[]",
"is-disabled": true,
"label": "Option 3"
}
],
"is-disabled": true
}
]
},
{
"title": "Stacked Checkboxes",
"modifiers": "is-stacked",
"samples": [
{
"type": "checkbox-group",
"label": "Vertikal angeordneten 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"
}
],
"is-stacked": true
}
]
},
{
"title": "Single Checkbox",
"samples": [
{
"type": "checkbox-group",
"label": "Datenschutzhinweise",
"message": null,
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Hiermit akzeptiere ich die <a href=\"#\">Datenschutzbestimmungen</a>."
}
],
"is-required": true
}
]
},
{
"title": "Radio Buttons",
"samples": [
{
"type": "checkbox-group",
"label": "Gruppe mit Alternativen",
"message": {
"content": "Sie können nur eine Option auswählen."
},
"options": [
{
"type": "radio",
"name": "radiobuttons[]",
"label": "Option 1"
},
{
"type": "radio",
"name": "radiobuttons[]",
"label": "Option 2"
},
{
"type": "radio",
"name": "radiobuttons[]",
"label": "Option 3"
}
]
},
{
"type": "checkbox-group",
"label": "Gruppe mit Alternativen",
"message": {
"content": "Ich bin erfolgreich geprüft."
},
"options": [
{
"type": "radio",
"name": "radiobuttons--valid[]",
"label": "Option 1"
},
{
"type": "radio",
"name": "radiobuttons--valid[]",
"label": "Option 2"
},
{
"type": "radio",
"name": "radiobuttons--valid[]",
"label": "Option 3"
}
],
"is-required": true,
"is-valid": true
},
{
"type": "checkbox-group",
"label": "Gruppe mit Alternativen",
"message": {
"content": "Ich bin die Fehlerbeschreibung."
},
"options": [
{
"type": "radio",
"name": "radiobuttons--invalid[]",
"label": "Option 1"
},
{
"type": "radio",
"name": "radiobuttons--invalid[]",
"label": "Option 2"
},
{
"type": "radio",
"name": "radiobuttons--invalid[]",
"label": "Option 3"
}
],
"is-required": true,
"is-invalid": true
},
{
"type": "checkbox-group",
"label": "Gruppe mit Alternativen",
"message": {
"content": "Dieses Angaben können nicht geändert werden."
},
"options": [
{
"is-disabled": true,
"is-checked": true,
"type": "radio",
"name": "radiobuttons--disabled[]",
"label": "Option 1"
},
{
"is-disabled": true,
"type": "radio",
"name": "radiobuttons--disabled[]",
"label": "Option 2"
},
{
"is-disabled": true,
"type": "radio",
"name": "radiobuttons--disabled[]",
"label": "Option 3"
}
],
"is-disabled": true
}
]
},
{
"title": "Stacked Radio Buttons",
"modifiers": "is-stacked",
"samples": [
{
"type": "checkbox-group",
"label": "Vertikal angeordnete Alternativen",
"message": {
"content": "Sie können nur eine Option auswählen."
},
"options": [
{
"type": "radio",
"name": "radiobuttons--stacked[]",
"label": "Option 1"
},
{
"type": "radio",
"name": "radiobuttons--stacked[]",
"label": "Option 2"
},
{
"type": "radio",
"name": "radiobuttons--stacked[]",
"label": "Option 3"
}
],
"is-stacked": true
}
]
},
{
"title": "Switches",
"samples": [
{
"type": "checkbox-group",
"label": "Gruppe mit Einstellungen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"modifier": "is-switch",
"is-checked": true,
"name": "switches[]",
"label": "Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Andere Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Weitere Einstellung aktivieren"
}
],
"is-stacked": true
},
{
"type": "checkbox-group",
"label": "Gruppe mit Einstellungen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"modifier": "is-switch",
"is-checked": true,
"name": "switches[]",
"label": "Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Andere Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Weitere Einstellung aktivieren"
}
],
"is-required": true,
"is-valid": true,
"is-stacked": true
},
{
"type": "checkbox-group",
"label": "Gruppe mit Einstellungen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"modifier": "is-switch",
"is-checked": true,
"name": "switches[]",
"label": "Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Andere Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"name": "switches[]",
"label": "Weitere Einstellung aktivieren"
}
],
"is-required": true,
"is-invalid": true,
"is-stacked": true
},
{
"type": "checkbox-group",
"label": "Gruppe mit Einstellungen",
"message": {
"content": "Dieses Angaben können nicht geändert werden."
},
"options": [
{
"type": "checkbox",
"modifier": "is-switch",
"is-disabled": true,
"is-checked": true,
"name": "switches--disabled[]",
"label": "Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"is-disabled": true,
"name": "switches--disabled[]",
"label": "Andere Einstellung aktivieren"
},
{
"type": "checkbox",
"modifier": "is-switch",
"is-disabled": true,
"name": "switches--disabled[]",
"label": "Weitere Einstellung aktivieren"
}
],
"is-disabled": true,
"is-stacked": true
}
]
}
]
}
@import "_formToggleSet.settings";
@import "_formToggleSet.styles";
$formToggleSet_gutter: $_grid_gutter !default;
%formToggleSet {
@include stack-spacing();
border: none;
padding: 0;
margin-left: 0;
margin-right: 0;
@include field-stacking();
.formToggle-label > span:not(.toggle) {
display: block;
font-weight: $_font-weight;
&::after {
// Hide optional marker
display: none;
}
}
&-label {
padding: 0;
@extend %label;
@include stack-spacing(0);
padding-bottom: $field_stack-spacing;
&::before { // Marker
margin-left: .75ch;
}
}
&[disabled] %formToggleSet-label {
@include state-styles($label_states, disabled);
}
&-options {
display: flex;
row-gap: $field_stack-spacing;
flex-wrap: wrap;
@include grid-gutter(default, column-gap);
> * {
flex-basis: fit-content;
}
}
&-label + &-options {
margin-top: .3em;
}
.formToggle {
@include stack-spacing(0);
}
.formToggle-label {
margin-top: 0;
&::after { // Supplement
display: none;
}
// Hide validation marker in individual labels
> span:not(.toggle) {
&::before {
content: none;
}
}
}
&[data-invalid="true"],
&[data-invalid="false"] {
.formToggle-label {
color: inherit;
}
}
&.is-stacked &-options {
flex-direction: column;
}
}
.formToggleSet {
@extend %formToggleSet;
&-label {
@extend %formToggleSet-label;
}
&-options {
@extend %formToggleSet-options;
}
}