Form Toggle

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<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="toggle" value="" /><span class="toggle-marker"></span>
        </span>
        <span>Option</span></label>

</div>


        
            <!-- Valid -->
<div class="formToggle is-checkbox is-required" data-invalid="false">

    <label class="formToggle-label is-required" data-invalid="false"><span class="toggle is-checkbox">
            <input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" data-invalid="false" /><span class="toggle-marker"></span>
        </span>
        <span>Option</span></label>

    <div class="formMessage js-formValidator-message">
        Ich bin erfolgreich geprüft.
    </div>

</div>


        
            <!-- Invalid -->
<div class="formToggle is-checkbox is-required" data-invalid="true">

    <label class="formToggle-label is-required" data-invalid="true"><span class="toggle is-checkbox">
            <input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" data-invalid="true" /><span class="toggle-marker"></span>
        </span>
        <span>Option</span></label>

    <div class="formMessage js-formValidator-message">
        Ich bin die Fehlerbeschreibung.
    </div>

</div>


        
            <!-- Disabled -->
<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="toggle" value="" disabled="disabled" /><span class="toggle-marker"></span>
        </span>
        <span>Option</span></label>

    <div class="formMessage js-formValidator-message">
        Dieses Angaben können von Ihnen nicht geändert werden.
    </div>

</div>


        
            <!-- Checked Disabled -->
<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="toggle" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
        </span>
        <span>Option</span></label>

    <div class="formMessage js-formValidator-message">
        Dieses Angaben können von Ihnen nicht geändert werden.
    </div>

</div>


        
            <!-- Small -->
<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>


        
            <!-- Radio -->
<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="toggle" value="" /><span class="toggle-marker"></span>
        </span>
        <span>Alternative</span></label>

</div>


        
            <!-- Radio Valid -->
<div class="formToggle is-radio is-required" data-invalid="false">

    <label class="formToggle-label is-required" data-invalid="false"><span class="toggle is-radio">
            <input class="toggle-input" role="switch" type="radio" name="toggle" value="" required="" data-parsley-trigger="change" data-invalid="false" /><span class="toggle-marker"></span>
        </span>
        <span>Alternative</span></label>

    <div class="formMessage js-formValidator-message">
        Ich bin erfolgreich geprüft.
    </div>

</div>


        
            <!-- Radio Invalid -->
<div class="formToggle is-radio is-required" data-invalid="true">

    <label class="formToggle-label is-required" data-invalid="true"><span class="toggle is-radio">
            <input class="toggle-input" role="switch" type="radio" name="toggle" value="" required="" data-parsley-trigger="change" data-invalid="true" /><span class="toggle-marker"></span>
        </span>
        <span>Alternative</span></label>

    <div class="formMessage js-formValidator-message">
        Ich bin die Fehlerbeschreibung.
    </div>

</div>


        
            <!-- Radio Disabled -->
<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="toggle" value="" disabled="disabled" /><span class="toggle-marker"></span>
        </span>
        <span>Alternative</span></label>

    <div class="formMessage js-formValidator-message">
        Dieses Angaben können von Ihnen nicht geändert werden.
    </div>

</div>


        
            <!-- Radio Checked Disabled -->
<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="toggle" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
        </span>
        <span>Alternative</span></label>

    <div class="formMessage js-formValidator-message">
        Dieses Angaben können von Ihnen nicht geändert werden.
    </div>

</div>


        
            <!-- Switch -->
<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="toggle" value="" /><span class="toggle-marker"></span>
        </span>
        <span>Einstellung aktivieren</span></label>

</div>


        
            <!-- Switch Valid -->
<div class="formToggle is-checkbox is-required is-switch" data-invalid="false">

    <label class="formToggle-label is-required is-switch" data-invalid="false"><span class="toggle is-checkbox is-switch">
            <input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" checked="checked" required="" data-parsley-trigger="change" data-invalid="false" /><span class="toggle-marker"></span>
        </span>
        <span>Einstellung aktivieren</span></label>

</div>


        
            <!-- Switch Invalid -->
<div class="formToggle is-checkbox is-required is-switch" data-invalid="true">

    <label class="formToggle-label is-required is-switch" data-invalid="true"><span class="toggle is-checkbox is-switch">
            <input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" data-invalid="true" /><span class="toggle-marker"></span>
        </span>
        <span>Einstellung aktivieren</span></label>

</div>


        
            <!-- Switch Disabled -->
<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="toggle" value="" disabled="disabled" /><span class="toggle-marker"></span>
        </span>
        <span>Einstellung aktivieren</span></label>

    <div class="formMessage js-formValidator-message">
        Dieses Angaben können von Ihnen nicht geändert werden.
    </div>

</div>


        
            <!-- Switch Checked Disabled -->
<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="toggle" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
        </span>
        <span>Einstellung aktivieren</span></label>

    <div class="formMessage js-formValidator-message">
        Dieses Angaben können von Ihnen nicht geändert werden.
    </div>

</div>


        
            <!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Checkbox</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <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="toggle" value="" /><span class="toggle-marker"></span>
            </span>
            <span>Option</span></label>

    </div>

    <div class="formToggle is-checkbox is-required" data-invalid="false">

        <label class="formToggle-label is-required" data-invalid="false"><span class="toggle is-checkbox">
                <input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" data-invalid="false" /><span class="toggle-marker"></span>
            </span>
            <span>Option</span></label>

        <div class="formMessage js-formValidator-message">
            Ich bin erfolgreich geprüft.
        </div>

    </div>

    <div class="formToggle is-checkbox is-required" data-invalid="true">

        <label class="formToggle-label is-required" data-invalid="true"><span class="toggle is-checkbox">
                <input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" data-invalid="true" /><span class="toggle-marker"></span>
            </span>
            <span>Option</span></label>

        <div class="formMessage js-formValidator-message">
            Ich bin die Fehlerbeschreibung.
        </div>

    </div>

    <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="toggle" value="" disabled="disabled" /><span class="toggle-marker"></span>
            </span>
            <span>Option</span></label>

        <div class="formMessage js-formValidator-message">
            Dieses Angaben können von Ihnen nicht geändert werden.
        </div>

    </div>

    <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="toggle" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
            </span>
            <span>Option</span></label>

        <div class="formMessage js-formValidator-message">
            Dieses Angaben können von Ihnen nicht geändert werden.
        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Checkbox Small</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Modifier">
                <li>is-small</li>
            </ul>
        </div>
        <div class="doc-variant-notes">
            ⚠️ Links im Label sind nur in dieser Variante erlaubt!
        </div>

    </header>

    <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>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Radiobutton</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <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="toggle" value="" /><span class="toggle-marker"></span>
            </span>
            <span>Alternative</span></label>

    </div>

    <div class="formToggle is-radio is-required" data-invalid="false">

        <label class="formToggle-label is-required" data-invalid="false"><span class="toggle is-radio">
                <input class="toggle-input" role="switch" type="radio" name="toggle" value="" required="" data-parsley-trigger="change" data-invalid="false" /><span class="toggle-marker"></span>
            </span>
            <span>Alternative</span></label>

        <div class="formMessage js-formValidator-message">
            Ich bin erfolgreich geprüft.
        </div>

    </div>

    <div class="formToggle is-radio is-required" data-invalid="true">

        <label class="formToggle-label is-required" data-invalid="true"><span class="toggle is-radio">
                <input class="toggle-input" role="switch" type="radio" name="toggle" value="" required="" data-parsley-trigger="change" data-invalid="true" /><span class="toggle-marker"></span>
            </span>
            <span>Alternative</span></label>

        <div class="formMessage js-formValidator-message">
            Ich bin die Fehlerbeschreibung.
        </div>

    </div>

    <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="toggle" value="" disabled="disabled" /><span class="toggle-marker"></span>
            </span>
            <span>Alternative</span></label>

        <div class="formMessage js-formValidator-message">
            Dieses Angaben können von Ihnen nicht geändert werden.
        </div>

    </div>

    <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="toggle" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
            </span>
            <span>Alternative</span></label>

        <div class="formMessage js-formValidator-message">
            Dieses Angaben können von Ihnen nicht geändert werden.
        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Switch</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <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="toggle" value="" /><span class="toggle-marker"></span>
            </span>
            <span>Einstellung aktivieren</span></label>

    </div>

    <div class="formToggle is-checkbox is-required is-switch" data-invalid="false">

        <label class="formToggle-label is-required is-switch" data-invalid="false"><span class="toggle is-checkbox is-switch">
                <input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" checked="checked" required="" data-parsley-trigger="change" data-invalid="false" /><span class="toggle-marker"></span>
            </span>
            <span>Einstellung aktivieren</span></label>

    </div>

    <div class="formToggle is-checkbox is-required is-switch" data-invalid="true">

        <label class="formToggle-label is-required is-switch" data-invalid="true"><span class="toggle is-checkbox is-switch">
                <input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" data-invalid="true" /><span class="toggle-marker"></span>
            </span>
            <span>Einstellung aktivieren</span></label>

    </div>

    <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="toggle" value="" disabled="disabled" /><span class="toggle-marker"></span>
            </span>
            <span>Einstellung aktivieren</span></label>

        <div class="formMessage js-formValidator-message">
            Dieses Angaben können von Ihnen nicht geändert werden.
        </div>

    </div>

    <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="toggle" value="" checked="checked" disabled="disabled" /><span class="toggle-marker"></span>
            </span>
            <span>Einstellung aktivieren</span></label>

        <div class="formMessage js-formValidator-message">
            Dieses Angaben können von Ihnen nicht geändert werden.
        </div>

    </div>

</section>

Handle: @formtoggle
Preview:
- With layout
- Component only
Filesystem Path: components/03-fragments/formFragments/formToggle/formToggle.html
References (3): @toggle, @formtoggle, @formmessage
Referenced by (35): @formfieldset, @formfieldset--with-notes, @formfieldset--without-legend, @formfieldset--with-buttons, @formtoggle--valid, @formtoggle--invalid, @formtoggle--disabled, @formtoggle--checked-disabled, @formtoggle--small, @formtoggle--radio, @formtoggle--radio-valid, @formtoggle--radio-invalid, @formtoggle--radio-disabled, @formtoggle--radio-checked-disabled, @formtoggle--switch, @formtoggle--switch-valid, @formtoggle--switch-invalid, @formtoggle--switch-disabled, @formtoggle--switch-checked-disabled, @formtoggle--doc-only, @formtoggleset, @formtoggleset--valid, @formtoggleset--invalid, @formtoggleset--disabled, @formtoggleset--single-item, @formtoggleset--stacked, @formtoggleset--radiobuttons, @formtoggleset--radiobuttons--valid, @formtoggleset--radiobuttons--invalid, @formtoggleset--radiobuttons--disabled, @formtoggleset--radiobuttons--stacked, @formtoggleset--switches, @formtoggleset--switches--valid, @formtoggleset--switches--invalid, @formtoggleset--switches--disabled


        <!-- Default -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Valid -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Invalid -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Disabled -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Checked Disabled -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Small -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Radio -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Radio Valid -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Radio Invalid -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Radio Disabled -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Radio Checked Disabled -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Switch -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Switch Valid -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Switch Invalid -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Switch Disabled -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Switch Checked Disabled -->
<div class="formToggle is-{{type}}{{#if is-required}} is-required{{/if}}{{#unless is-required}} is-optional{{/unless}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>

    <label class="formToggle-label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>{{render '@toggle' (contextData '@formtoggle' this) merge=true}} <span>{{{label}}}</span></label>

    {{#message}}
        {{render '@formmessage' (contextData '@formtoggle' this) merge=true}}
    {{/message}}

</div>

<!-- Doc Only -->
{{#variants}}
<section 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>
            {{#notes}}
        <div class="doc-variant-notes">
            {{{.}}}
        </div>
            {{/notes}}

    </header>

    {{#samples}}
        {{render '@formtoggle' (contextData '@formtoggle' this) merge=true}}
    {{/samples}}

</section>
    {{/variants}}


        
        
            /* Default */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Option"
}


        
            /* Valid */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Option",
  "is-required": true,
  "is-valid": true,
  "message": {
    "content": "Ich bin erfolgreich geprüft."
  }
}


        
            /* Invalid */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Option",
  "is-required": true,
  "is-invalid": true,
  "message": {
    "content": "Ich bin die Fehlerbeschreibung."
  }
}


        
            /* Disabled */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Option",
  "is-disabled": true,
  "message": {
    "content": "Dieses Angaben können von Ihnen nicht geändert werden."
  }
}


        
            /* Checked Disabled */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Option",
  "is-disabled": true,
  "is-checked": true,
  "message": {
    "content": "Dieses Angaben können von Ihnen nicht geändert werden."
  }
}


        
            /* Small */
{
  "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"
}


        
            /* Radio */
{
  "type": "radio",
  "id": "toggle",
  "name": "toggle",
  "label": "Alternative"
}


        
            /* Radio Valid */
{
  "type": "radio",
  "id": "toggle",
  "name": "toggle",
  "label": "Alternative",
  "is-required": true,
  "is-valid": true,
  "message": {
    "content": "Ich bin erfolgreich geprüft."
  }
}


        
            /* Radio Invalid */
{
  "type": "radio",
  "id": "toggle",
  "name": "toggle",
  "label": "Alternative",
  "is-required": true,
  "is-invalid": true,
  "message": {
    "content": "Ich bin die Fehlerbeschreibung."
  }
}


        
            /* Radio Disabled */
{
  "type": "radio",
  "id": "toggle",
  "name": "toggle",
  "label": "Alternative",
  "is-disabled": true,
  "message": {
    "content": "Dieses Angaben können von Ihnen nicht geändert werden."
  }
}


        
            /* Radio Checked Disabled */
{
  "type": "radio",
  "id": "toggle",
  "name": "toggle",
  "label": "Alternative",
  "is-disabled": true,
  "is-checked": true,
  "message": {
    "content": "Dieses Angaben können von Ihnen nicht geändert werden."
  }
}


        
            /* Switch */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Einstellung aktivieren",
  "modifier": "is-switch"
}


        
            /* Switch Valid */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Einstellung aktivieren",
  "modifier": "is-switch",
  "is-required": true,
  "is-checked": true,
  "is-valid": true
}


        
            /* Switch Invalid */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Einstellung aktivieren",
  "modifier": "is-switch",
  "is-required": true,
  "is-invalid": true
}


        
            /* Switch Disabled */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Einstellung aktivieren",
  "is-disabled": true,
  "modifier": "is-switch",
  "message": {
    "content": "Dieses Angaben können von Ihnen nicht geändert werden."
  }
}


        
            /* Switch Checked Disabled */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Einstellung aktivieren",
  "is-disabled": true,
  "is-checked": true,
  "modifier": "is-switch",
  "message": {
    "content": "Dieses Angaben können von Ihnen nicht geändert werden."
  }
}


        
            /* Doc Only */
{
  "type": "checkbox",
  "id": "toggle",
  "name": "toggle",
  "label": "Option",
  "variants": [
    {
      "title": "Checkbox",
      "samples": [
        {
          "type": "checkbox",
          "id": "toggle",
          "name": "toggle",
          "label": "Option"
        },
        {
          "type": "checkbox",
          "id": "toggle",
          "name": "toggle",
          "label": "Option",
          "is-required": true,
          "is-valid": true,
          "message": {
            "content": "Ich bin erfolgreich geprüft."
          }
        },
        {
          "type": "checkbox",
          "id": "toggle",
          "name": "toggle",
          "label": "Option",
          "is-required": true,
          "is-invalid": true,
          "message": {
            "content": "Ich bin die Fehlerbeschreibung."
          }
        },
        {
          "type": "checkbox",
          "id": "toggle",
          "name": "toggle",
          "label": "Option",
          "is-disabled": true,
          "message": {
            "content": "Dieses Angaben können von Ihnen nicht geändert werden."
          }
        },
        {
          "type": "checkbox",
          "id": "toggle",
          "name": "toggle",
          "label": "Option",
          "is-disabled": true,
          "is-checked": true,
          "message": {
            "content": "Dieses Angaben können von Ihnen nicht geändert werden."
          }
        }
      ]
    },
    {
      "title": "Checkbox Small",
      "notes": "⚠️ Links im Label sind nur in dieser Variante erlaubt!",
      "modifiers": "is-small",
      "samples": [
        {
          "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"
        }
      ]
    },
    {
      "title": "Radiobutton",
      "samples": [
        {
          "type": "radio",
          "id": "toggle",
          "name": "toggle",
          "label": "Alternative"
        },
        {
          "type": "radio",
          "id": "toggle",
          "name": "toggle",
          "label": "Alternative",
          "is-required": true,
          "is-valid": true,
          "message": {
            "content": "Ich bin erfolgreich geprüft."
          }
        },
        {
          "type": "radio",
          "id": "toggle",
          "name": "toggle",
          "label": "Alternative",
          "is-required": true,
          "is-invalid": true,
          "message": {
            "content": "Ich bin die Fehlerbeschreibung."
          }
        },
        {
          "type": "radio",
          "id": "toggle",
          "name": "toggle",
          "label": "Alternative",
          "is-disabled": true,
          "message": {
            "content": "Dieses Angaben können von Ihnen nicht geändert werden."
          }
        },
        {
          "type": "radio",
          "id": "toggle",
          "name": "toggle",
          "label": "Alternative",
          "is-disabled": true,
          "is-checked": true,
          "message": {
            "content": "Dieses Angaben können von Ihnen nicht geändert werden."
          }
        }
      ]
    },
    {
      "title": "Switch",
      "samples": [
        {
          "type": "checkbox",
          "id": "toggle",
          "name": "toggle",
          "label": "Einstellung aktivieren",
          "modifier": "is-switch"
        },
        {
          "type": "checkbox",
          "id": "toggle",
          "name": "toggle",
          "label": "Einstellung aktivieren",
          "modifier": "is-switch",
          "is-required": true,
          "is-checked": true,
          "is-valid": true
        },
        {
          "type": "checkbox",
          "id": "toggle",
          "name": "toggle",
          "label": "Einstellung aktivieren",
          "modifier": "is-switch",
          "is-required": true,
          "is-invalid": true
        },
        {
          "type": "checkbox",
          "id": "toggle",
          "name": "toggle",
          "label": "Einstellung aktivieren",
          "is-disabled": true,
          "modifier": "is-switch",
          "message": {
            "content": "Dieses Angaben können von Ihnen nicht geändert werden."
          }
        },
        {
          "type": "checkbox",
          "id": "toggle",
          "name": "toggle",
          "label": "Einstellung aktivieren",
          "is-disabled": true,
          "is-checked": true,
          "modifier": "is-switch",
          "message": {
            "content": "Dieses Angaben können von Ihnen nicht geändert werden."
          }
        }
      ]
    }
  ]
}

File:

Content:


                                @import "_formToggle.settings";
@import "_formToggle.styles";

%formToggle-label {

    .toggle:not(.is-switch) {
        position: static;
        bottom: auto;
        transform: none;
    }

}

%formToggle.is-small {

    %formToggle-label {
        @include text-size(small);
    }

}

URL: /components/raw/formtoggle/_formToggle.scss
Filesystem Path: components/03-fragments/formFragments/formToggle/_formToggle.scss
Size: 289 Bytes

Content:


                                $formToggle_label_styles: (
    font-size: $field_font-size,
    line-height: $field_line-height,
) !default;

$formToggle_label_states: (
    default: $formToggle_label_styles,
    valid: (
        color: $label_color--valid,
    ),
    invalid: (
        color: $label_color--invalid,
    ),
    disabled: (
        color: $label_color--disabled,
    ),
) !default;

URL: /components/raw/formtoggle/_formToggle.settings.scss
Filesystem Path: components/03-fragments/formFragments/formToggle/_formToggle.settings.scss
Size: 368 Bytes

Content:


                                %formToggle {
    @include stack-spacing();
    @include field-stacking();
}

%formToggle--checkbox {
    @extend %formToggle;
}

%formToggle--radio {
    @extend %formToggle;
}

%formToggle--switch {
    @extend %formToggle;
}

    //***** Labels *****//

%formToggle-label {
    $gap: .75ch;

    display: inline-flex;
    align-items: baseline;
    column-gap: $gap;

    user-select: none;

    @include styles($formToggle_label_styles);

    position: relative;

    > span:not(.toggle) {
        @extend %label;

        @include stack-spacing(0);
        font-size: inherit;
        line-height: inherit;

        color: inherit;
    }

    &::after {
        margin-left: (-1 * $gap);
    }

    [data-invalid="false"] &,
    &[data-invalid="false"],
    &--valid {
        @include state-styles($formToggle_label_states, valid);
    }

    [data-invalid="true"] &,
    &[data-invalid="true"],
    &--invalid {
        @include state-styles($formToggle_label_states, invalid);
    }

    [disabled] &,
    [aria-disabled="true"] &,
    [data-disabled="true"] &,
    &[data-disabled="true"],
    &--disabled,
    .is-disabled & {
        cursor: default;
        pointer-events: none;
        @include state-styles($formToggle_label_states, disabled);
    }

    &:not([data-disabled="true"]):not(.is-disabled) {
        cursor: pointer;
    }

    .toggle {
        position: relative;
        bottom: .4em;
        transform: translateY(50%);

        &-input {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;

            z-index: 1;
        }

    }

    a {
        @extend %link;
    }

    &:has(a:hover) %toggle-input ~ %toggle-marker {
        @include styles($toggle_styles);
    }

}

%formToggle--small {

    %formToggle-label {
        @include text-size(small);

        > span:not(.toggle) {
            display: block;
            @include text-size(inherit);
            font-weight: $_font-weight;
        }

    }

    //** Quickfix for styling of validation **//

    // Note: Validation should not be used directly on form toggle.
    //       Use a form toggle group with a single option instead.

    %formToggle-label > span:not(.toggle) {

        &::before {
            margin-top: 0;
            margin-bottom: -.1em;
            margin-right: $label_marker_gutter;
        }

    }

    &[data-invalid] %formToggle-label > span:not(.toggle) {

        &::before {
            display: inline-block;
        }

    }

    &[data-invalid="false"] %formToggle-label > span:not(.toggle) {
        color: $label_color;

        &::before {
            display: none;
        }

    }

}

    //***** Classes *****//

.formToggle {
    @extend %formToggle;

    &-label {
        @extend %formToggle-label;
    }

    &.is-checkbox {
        @extend %formToggle--checkbox;
    }

    &.is-radio {
        @extend %formToggle--radio;
    }

    &.is-switch {
        @extend %formToggle--switch;
    }

    &.is-small {
        @extend %formToggle--small;
    }

}

URL: /components/raw/formtoggle/_formToggle.styles.scss
Filesystem Path: components/03-fragments/formFragments/formToggle/_formToggle.styles.scss
Size: 3.1 KB