PSI Software SE Design Library

Form Field

Component: Form Field

Implementation notes

  • Attention: When multiple fields with limited width follow each other and should be positioned next to each other in the layout, they must be grouped in a container (e.g. fieldset) so that they fit together in one line; for example:
    • three one-third variants
    • two one-forth variants together with one one-half variant
  • The component uses the CSS pseudo-class :focus-within for highlighting the label. If this behaviour is also desired for older browsers, it must be emulated with JavaScript.
<!-- Default -->
<div class="formField">

    <label class="label is-optional" for="field-id">Bezeichnung</label>

    <span class="formField-field">
        <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />

    </span>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


<!-- Text -->
<div class="formField">

    <label class="label is-optional" for="field-id">Optionales Feld</label>

    <span class="formField-field">
        <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />

    </span>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


<!-- Password -->
<div class="formField is-password" data-revealer-show="Passwort anzeigen" data-revealer-hide="Passwort verbergen">

    <label class="label is-optional" for="field-password">Passwort</label>

    <span class="formField-field">
        <input class="field" type="password" id="field-password" name="password" placeholder="" spellcheck="false" />

    </span>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


<!-- Email -->
<div class="formField is-email">

    <label class="label is-optional" for="field-email">E-Mail-Adresse</label>

    <span class="formField-field">
        <input class="field" type="email" id="field-email" name="email" placeholder="" spellcheck="false" />

    </span>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


<!-- Tel -->
<div class="formField is-tel">

    <label class="label is-optional" for="field-tel">Telefonnummer</label>

    <span class="formField-field">
        <input class="field" type="tel" id="field-tel" name="tel" placeholder="" spellcheck="false" />

    </span>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


<!-- Url -->
<div class="formField is-url">

    <label class="label is-optional" for="field-url">Website</label>

    <span class="formField-field">
        <input class="field" type="url" id="field-url" name="url" placeholder="" spellcheck="false" />

    </span>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


<!-- Number -->
<div class="formField is-number">

    <label class="label is-optional" for="field-number">Nummer</label>

    <span class="formField-field">
        <input class="field" type="number" id="field-number" name="number" placeholder="" inputmode="decimal" spellcheck="false" />

    </span>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


<!-- Date -->
<div class="formField is-date">

    <label class="label is-optional" for="field-date">Datum</label>

    <span class="formField-field">
        <input class="field" type="date" id="field-date" name="date" placeholder="" spellcheck="false" />

    </span>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


<!-- Datetime Local -->
<div class="formField is-datetime-local">

    <label class="label is-optional" for="field-datetime-local">Datum und Uhrzeit</label>

    <span class="formField-field">
        <input class="field" type="datetime-local" id="field-datetime-local" name="datetime-local" spellcheck="false" />

    </span>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


<!-- Required -->
<div class="formField is-required">

    <label class="label is-required" for="field-required">Pflichtfeld</label>

    <span class="formField-field">
        <input class="field" type="text" id="field-required" name="required" placeholder="" spellcheck="false" required="" aria-required="true" />

    </span>

    <div class="formMessage js-formValidator-message">
        Ich bin ein Hinweis.
    </div>

</div>


<!-- Valid -->
<div class="formField is-required">

    <label class="label is-required" data-invalid="false" for="field-valid">Pflichtfeld</label>

    <span class="formField-field">
        <input class="field" type="text" id="field-valid" name="valid" value="Erfolgreich geprüftes Feld" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="false" />

    </span>

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

</div>


<!-- Invalid -->
<div class="formField is-required">

    <label class="label is-required" data-invalid="true" for="field-invalid">Pflichtfeld</label>

    <span class="formField-field">
        <input class="field" type="text" id="field-invalid" name="invalid" value="Beanstandetes Feld" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="true" />

    </span>

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

</div>


<!-- Disabled -->
<div class="formField is-disabled">

    <label class="label is-optional" data-disabled="true" for="field-disabled">Deaktiviertes Feld</label>

    <span class="formField-field">
        <input class="field" type="text" id="field-disabled" name="disabled" value="Festgelegter Inhalt" placeholder="" disabled="disabled" />

    </span>

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

</div>


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

    <div class="doc-header">

        <h2 class="doc-header-title">Typen</h2>

    </div>

    <div class="doc-variant">

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

            <h2 class="doc-variant-title">Text (Default)</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[type="text"]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField">

                <label class="label is-optional" for="field-id">Bezeichnung</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />

                </span>

                <div class="formMessage js-formValidator-message">
                    Ich bin ein Hinweis.
                </div>

            </div>

        </div>

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

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

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

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[type="password"]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-password" data-revealer-show="Passwort anzeigen" data-revealer-hide="Passwort verbergen">

                <label class="label is-optional" for="field-password">Passwort</label>

                <span class="formField-field">
                    <input class="field" type="password" id="field-password" name="password" placeholder="" spellcheck="false" />

                </span>

                <div class="formMessage js-formValidator-message">
                    Ich bin ein Hinweis.
                </div>

            </div>

        </div>

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

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

            <h2 class="doc-variant-title">E-mail</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[type="email"]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-email">

                <label class="label is-optional" for="field-email">E-Mail-Adresse</label>

                <span class="formField-field">
                    <input class="field" type="email" id="field-email" name="email" placeholder="" spellcheck="false" />

                </span>

                <div class="formMessage js-formValidator-message">
                    Ich bin ein Hinweis.
                </div>

            </div>

        </div>

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

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

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

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[type="tel"]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-tel">

                <label class="label is-optional" for="field-tel">Telefonnummer</label>

                <span class="formField-field">
                    <input class="field" type="tel" id="field-tel" name="tel" placeholder="" spellcheck="false" />

                </span>

                <div class="formMessage js-formValidator-message">
                    Ich bin ein Hinweis.
                </div>

            </div>

        </div>

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

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

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

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[type="url"]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-url">

                <label class="label is-optional" for="field-url">Website</label>

                <span class="formField-field">
                    <input class="field" type="url" id="field-url" name="url" placeholder="" spellcheck="false" />

                </span>

                <div class="formMessage js-formValidator-message">
                    Ich bin ein Hinweis.
                </div>

            </div>

        </div>

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

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

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

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[type="number"]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-number">

                <label class="label is-optional" for="field-number">Nummer</label>

                <span class="formField-field">
                    <input class="field" type="number" id="field-number" name="number" placeholder="" inputmode="decimal" spellcheck="false" />

                </span>

                <div class="formMessage js-formValidator-message">
                    Ich bin ein Hinweis.
                </div>

            </div>

        </div>

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

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

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

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[type="date"]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-date">

                <label class="label is-optional" for="field-date">Datum</label>

                <span class="formField-field">
                    <input class="field" type="date" id="field-date" name="date" placeholder="" spellcheck="false" />

                </span>

                <div class="formMessage js-formValidator-message">
                    Ich bin ein Hinweis.
                </div>

            </div>

        </div>

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

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

            <h2 class="doc-variant-title">Date with Time</h2>

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>[type="datetime-local"]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-datetime-local">

                <label class="label is-optional" for="field-datetime-local">Datum und Uhrzeit</label>

                <span class="formField-field">
                    <input class="field" type="datetime-local" id="field-datetime-local" name="datetime-local" spellcheck="false" />

                </span>

                <div class="formMessage js-formValidator-message">
                    Ich bin ein Hinweis.
                </div>

            </div>

        </div>

    </div>

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

    <div class="doc-header">

        <h2 class="doc-header-title">Zustände</h2>

    </div>

    <div class="doc-variant">

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

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

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>.is-required</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-required">

                <label class="label is-required" for="field-required">Pflichtfeld</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-required" name="required" placeholder="" spellcheck="false" required="" aria-required="true" />

                </span>

                <div class="formMessage js-formValidator-message">
                    Ich bin ein Hinweis.
                </div>

            </div>

        </div>

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

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

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

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>.is-required</li>
                    <li>[aria-invalid="false"]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-required">

                <label class="label is-required" data-invalid="false" for="field-valid">Pflichtfeld</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-valid" name="valid" value="Erfolgreich geprüftes Feld" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="false" />

                </span>

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

            </div>

        </div>

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

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

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

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>.is-required</li>
                    <li>[aria-invalid="true"]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-required">

                <label class="label is-required" data-invalid="true" for="field-invalid">Pflichtfeld</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-invalid" name="invalid" value="Beanstandetes Feld" placeholder="" spellcheck="false" required="" aria-required="true" aria-invalid="true" />

                </span>

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

            </div>

        </div>

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

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

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

            <div class="doc-variant-configuration">
                <ul data-label="Modifier">
                    <li>.is-disabled</li>
                    <li>[disabled]</li>
                </ul>
            </div>

        </header>

        <div class="formField-flexbox">
            <div class="formField is-disabled">

                <label class="label is-optional" data-disabled="true" for="field-disabled">Deaktiviertes Feld</label>

                <span class="formField-field">
                    <input class="field" type="text" id="field-disabled" name="disabled" value="Festgelegter Inhalt" placeholder="" disabled="disabled" />

                </span>

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

            </div>

        </div>

    </div>

</section>


<!-- Default -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Text -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Password -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Email -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Tel -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Url -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Number -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Date -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Datetime Local -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Required -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Valid -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Invalid -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Disabled -->
<div class="formField
         {{~#type}} is-{{.}}{{/type~}}
         {{~#if is-required}} is-required{{/if~}}
         {{~#if is-disabled}} is-disabled{{/if~}}
         {{~#modifier}} {{{.}}}{{/modifier~}}
     "
     {{~#width}} data-width="{{.}}"{{/width~}}
     {{~#if validate}} data-validate="true"{{/if~}}
     {{~#revealer}}{{#show}} data-revealer-show="{{.}}"{{/show}}{{#hide}} data-revealer-hide="{{.}}"{{/hide}}{{/revealer~}}
     >

    {{> @label}}

    <span class="formField-field">
        {{render '@field' (contextData '@formfield' this) merge=true}}
    </span>

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

</div>

<!-- Doc Only -->
{{#sections}}
<section class="doc-section">

    <div class="doc-header">

            {{#title}}
        <h2 class="doc-header-title">{{{.}}}</h2>
            {{/title}}

            {{#if attributes}}
        <div class="doc-header-configuration">
            <ul data-label="Attributes">
                    {{#attributes}}
                <li>{{{.}}}</li>
                    {{/attributes}}
            </ul>
        </div>
            {{/if}}

            {{#notes}}
        <div class="doc-header-notes">
            {{{.}}}
        </div>
            {{/notes}}

    </div>

        {{#variants}}
    <div class="doc-variant">

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

                {{#title}}
            <h2 class="doc-variant-title">{{{.}}}</h2>
                {{/title}}

            <div class="doc-variant-configuration">
                    {{#if modifiers}}
                <ul data-label="Modifier">
                        {{#modifiers}}
                    <li>{{{.}}}</li>
                        {{/modifiers}}
                </ul>
                    {{/if}}
            </div>

        </header>

        <div class="formField-flexbox">
            {{#samples}}
                {{render '@formfield' (contextData '@formfield' this) merge=true}}
            {{/samples}}
        </div>

    </div>
        {{/variants}}

</section>
    {{/sections}}
 
/* Default */
{
  "id": "id",
  "name": "fieldname",
  "label": "Bezeichnung",
  "placeholder": "Beispiel für Inhalt",
  "message": {
    "content": "Ich bin ein Hinweis."
  }
}


/* Text */
{
  "id": "id",
  "name": "fieldname",
  "label": "Optionales Feld",
  "placeholder": "Beispiel für Inhalt",
  "message": {
    "content": "Ich bin ein Hinweis."
  }
}


/* Password */
{
  "id": "password",
  "name": "password",
  "label": "Passwort",
  "placeholder": "••••••••",
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "type": "password",
  "revealer": {
    "show": "Passwort anzeigen",
    "hide": "Passwort verbergen"
  }
}


/* Email */
{
  "id": "email",
  "name": "email",
  "label": "E-Mail-Adresse",
  "placeholder": "alex@muster.de",
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "type": "email"
}


/* Tel */
{
  "id": "tel",
  "name": "tel",
  "label": "Telefonnummer",
  "placeholder": "+49 123 4567890",
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "type": "tel"
}


/* Url */
{
  "id": "url",
  "name": "url",
  "label": "Website",
  "placeholder": "www.muster.de",
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "type": "url"
}


/* Number */
{
  "id": "number",
  "name": "number",
  "label": "Nummer",
  "placeholder": 12345,
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "type": "number",
  "inputmode": "decimal"
}


/* Date */
{
  "id": "date",
  "name": "date",
  "label": "Datum",
  "placeholder": "01.01.1970",
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "type": "date"
}


/* Datetime Local */
{
  "id": "datetime-local",
  "name": "datetime-local",
  "label": "Datum und Uhrzeit",
  "placeholder": null,
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "type": "datetime-local"
}


/* Required */
{
  "id": "required",
  "name": "required",
  "label": "Pflichtfeld",
  "placeholder": "Beispiel für Inhalt",
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "is-required": true
}


/* Valid */
{
  "id": "valid",
  "name": "valid",
  "label": "Pflichtfeld",
  "placeholder": "Beispiel für Inhalt",
  "message": {
    "content": "Ich bin erfolgreich geprüft."
  },
  "is-required": true,
  "is-valid": true,
  "value": "Erfolgreich geprüftes Feld"
}


/* Invalid */
{
  "id": "invalid",
  "name": "invalid",
  "label": "Pflichtfeld",
  "placeholder": "Beispiel für Inhalt",
  "message": {
    "content": "Ich bin die Fehlerbeschreibung."
  },
  "is-required": true,
  "is-invalid": true,
  "value": "Beanstandetes Feld"
}


/* Disabled */
{
  "id": "disabled",
  "name": "disabled",
  "label": "Deaktiviertes Feld",
  "placeholder": "Beispiel für Inhalt",
  "message": {
    "content": "Dieses Angaben können nicht geändert werden."
  },
  "is-disabled": true,
  "value": "Festgelegter Inhalt"
}


/* Doc Only */
{
  "id": "id",
  "name": "fieldname",
  "label": "Bezeichnung",
  "placeholder": "Beispiel für Inhalt",
  "message": {
    "content": "Ich bin ein Hinweis."
  },
  "sections": [
    {
      "title": "Typen",
      "variants": [
        {
          "title": "Text (Default)",
          "modifiers": "[type=\"text\"]",
          "samples": [
            {
              "id": "id",
              "name": "fieldname",
              "label": "Bezeichnung",
              "placeholder": "Beispiel für Inhalt",
              "message": {
                "content": "Ich bin ein Hinweis."
              }
            }
          ]
        },
        {
          "title": "Password",
          "modifiers": "[type=\"password\"]",
          "samples": [
            {
              "id": "password",
              "name": "password",
              "label": "Passwort",
              "placeholder": "••••••••",
              "message": {
                "content": "Ich bin ein Hinweis."
              },
              "type": "password",
              "revealer": {
                "show": "Passwort anzeigen",
                "hide": "Passwort verbergen"
              }
            }
          ]
        },
        {
          "title": "E-mail",
          "modifiers": "[type=\"email\"]",
          "samples": [
            {
              "id": "email",
              "name": "email",
              "label": "E-Mail-Adresse",
              "placeholder": "alex@muster.de",
              "message": {
                "content": "Ich bin ein Hinweis."
              },
              "type": "email"
            }
          ]
        },
        {
          "title": "Phone",
          "modifiers": "[type=\"tel\"]",
          "samples": [
            {
              "id": "tel",
              "name": "tel",
              "label": "Telefonnummer",
              "placeholder": "+49 123 4567890",
              "message": {
                "content": "Ich bin ein Hinweis."
              },
              "type": "tel"
            }
          ]
        },
        {
          "title": "URL",
          "modifiers": "[type=\"url\"]",
          "samples": [
            {
              "id": "url",
              "name": "url",
              "label": "Website",
              "placeholder": "www.muster.de",
              "message": {
                "content": "Ich bin ein Hinweis."
              },
              "type": "url"
            }
          ]
        },
        {
          "title": "Number",
          "modifiers": "[type=\"number\"]",
          "samples": [
            {
              "id": "number",
              "name": "number",
              "label": "Nummer",
              "placeholder": 12345,
              "message": {
                "content": "Ich bin ein Hinweis."
              },
              "type": "number",
              "inputmode": "decimal"
            }
          ]
        },
        {
          "title": "Date",
          "modifiers": "[type=\"date\"]",
          "samples": [
            {
              "id": "date",
              "name": "date",
              "label": "Datum",
              "placeholder": "01.01.1970",
              "message": {
                "content": "Ich bin ein Hinweis."
              },
              "type": "date"
            }
          ]
        },
        {
          "title": "Date with Time",
          "modifiers": "[type=\"datetime-local\"]",
          "samples": [
            {
              "id": "datetime-local",
              "name": "datetime-local",
              "label": "Datum und Uhrzeit",
              "placeholder": null,
              "message": {
                "content": "Ich bin ein Hinweis."
              },
              "type": "datetime-local"
            }
          ]
        }
      ]
    },
    {
      "title": "Zustände",
      "variants": [
        {
          "title": "Default",
          "modifiers": [
            ".is-required"
          ],
          "samples": {
            "id": "required",
            "name": "required",
            "label": "Pflichtfeld",
            "placeholder": "Beispiel für Inhalt",
            "message": {
              "content": "Ich bin ein Hinweis."
            },
            "is-required": true
          }
        },
        {
          "title": "Valid",
          "modifiers": [
            ".is-required",
            "[aria-invalid=\"false\"]"
          ],
          "samples": {
            "id": "valid",
            "name": "valid",
            "label": "Pflichtfeld",
            "placeholder": "Beispiel für Inhalt",
            "message": {
              "content": "Ich bin erfolgreich geprüft."
            },
            "is-required": true,
            "is-valid": true,
            "value": "Erfolgreich geprüftes Feld"
          }
        },
        {
          "title": "Invalid",
          "modifiers": [
            ".is-required",
            "[aria-invalid=\"true\"]"
          ],
          "samples": {
            "id": "invalid",
            "name": "invalid",
            "label": "Pflichtfeld",
            "placeholder": "Beispiel für Inhalt",
            "message": {
              "content": "Ich bin die Fehlerbeschreibung."
            },
            "is-required": true,
            "is-invalid": true,
            "value": "Beanstandetes Feld"
          }
        },
        {
          "title": "Disabled",
          "modifiers": [
            ".is-disabled",
            "[disabled]"
          ],
          "samples": {
            "id": "disabled",
            "name": "disabled",
            "label": "Deaktiviertes Feld",
            "placeholder": "Beispiel für Inhalt",
            "message": {
              "content": "Dieses Angaben können nicht geändert werden."
            },
            "is-disabled": true,
            "value": "Festgelegter Inhalt"
          }
        }
      ]
    }
  ]
}
  • Content: 
    import {PasswordRevealer} from "./_formField.script";

const passwordRevealer = new PasswordRevealer();

passwordRevealer.init();
  • URL: /components/raw/formfield/_formField.js
  • Filesystem Path: components/03-fragments/formFragments/formField/_formField.js
  • Size: 130 Bytes
  • Content: 
    export function PasswordRevealer() {

    const defaults = {
        selectors: {
            container: ".formField",
            element: "input[type=\"password\"]",
        },
        classes: {
            button: "formField-revealer",
        },
        labels: {
            show: "Show password",
            hide: "Hide password",
        }
    };

    function init(options) {

        options = options || {};

        const elements = document.querySelectorAll(defaults.selectors.element);

        for (let i = 0; i < elements.length; i++) {
            new Revealer(elements[i], options);
        }

    }

    const Revealer = function(element, options) {

        this.element = element;
        this.container = this.element.closest(defaults.selectors.container);

        if (! this.container) {
            return;
        }

        this.container.dataset.revealed = "false";

        let labels = Object.assign({}, defaults.labels);

        if (typeof this.container.dataset.revealerShow === "string") {
            labels.show = this.container.dataset.revealerShow;
        }

        if (typeof this.container.dataset.revealerHide === "string") {
            labels.hide = this.container.dataset.revealerHide;
        }

        // Add button

        const button = document.createElement("button");

        button.classList.add(defaults.classes.button);
        button.innerHTML = labels.show;

        this.element.after(button);

        button.addEventListener("click", (event) => {

            let isRevealed = this.toggle();

            button.innerHTML = isRevealed ? labels.hide : labels.show;
            button.dataset.revealed = isRevealed;

            setButtonState();

        });

        const setButtonState = () => {

            let isEmpty = (this.element.value === ""),
                isRevealed = button.dataset.revealed === "true";

            button.disabled = isEmpty && ! isRevealed;

        }

        this.element.addEventListener("keyup", (event) => {
            setButtonState();
        });

        setButtonState();

    }

    Revealer.prototype.toggle = function() {

        let isRevealed = this.element.getAttribute("type") === "text";

        if (! isRevealed){

            if (this.element.value !== ""){
                this.element.setAttribute("type", "text");
                isRevealed = true;
            }

        } else {
            this.element.setAttribute("type", "password");
            isRevealed = false;
        }

        this.container.dataset.revealed = isRevealed;

        return isRevealed;

    }

    return {
        init: init
    }

}
  • URL: /components/raw/formfield/_formField.script.js
  • Filesystem Path: components/03-fragments/formFragments/formField/_formField.script.js
  • Size: 2.6 KB
  • Content: 
    $formField_revealer_icon_stroke-width: 2 !default;

@import "_formField.settings";
@import "_formField.styles";

%formField {

    &.is-password {

        %formField-field {
            position: relative;

            &::after { // Line before revealer
                content: "";

                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);

                display: block;
                box-sizing: content-box;

                height: calc(100% - #{2 * nth($field_padding, 1)});

                width: $formField_revealer_size;
                padding-right: nth($field_padding, 2);
                padding-left: nth($field_padding, 2);

                border-left: 1px solid nth($field_border-color, 1);

                pointer-events: none;
                user-select: none;
            }

        }

        .field {
            padding-right: calc(#{$formField_revealer_size} + #{2.5 * nth($field_padding, 2)});
        }

    }

}
  • URL: /components/raw/formfield/_formField.scss
  • Filesystem Path: components/03-fragments/formFragments/formField/_formField.scss
  • Size: 1 KB
  • Content: 
    $formField_revealer_size: 24px !default;

$formField_revealer_icon_stroke-width: 1 !default;
$formField_revealer_icons: (
    hidden: '<svg width="24" height="25" viewBox="0 0 24 25" fill="none" stroke="{{color}}" stroke-width="#{$formField_revealer_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 4.11627L19.5 20.6163M14.5228 15.1413C13.7868 15.8104 12.8152 16.1597 11.8217 16.1124C10.8281 16.0651 9.89409 15.6251 9.225 14.8891C8.55591 14.1531 8.20659 13.1815 8.25388 12.1879C8.30118 11.1944 8.74121 10.2604 9.47719 9.59127M12.7059 8.68283C13.5032 8.8355 14.2294 9.24275 14.7754 9.84338C15.3214 10.444 15.6578 11.2056 15.7341 12.0138M19.5572 16.2194C21.6009 14.3894 22.5 12.3663 22.5 12.3663C22.5 12.3663 19.5 5.61627 12 5.61627C11.3505 5.61538 10.7021 5.66806 10.0612 5.77377M6.9375 6.79752C3.11531 8.73252 1.5 12.3663 1.5 12.3663C1.5 12.3663 4.5 19.1163 12 19.1163C13.7574 19.1301 15.4927 18.7251 17.0625 17.935"/></svg>',
    revealed: '<svg width="25" height="25" viewBox="0 0 25 25" fill="none" stroke="{{color}}" stroke-width="#{$formField_revealer_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12.366 5.61627C4.86597 5.61627 1.86597 12.3663 1.86597 12.3663C1.86597 12.3663 4.86597 19.1163 12.366 19.1163C19.866 19.1163 22.866 12.3663 22.866 12.3663C22.866 12.3663 19.866 5.61627 12.366 5.61627Z"/><path d="M12.366 16.1163C14.437 16.1163 16.116 14.4373 16.116 12.3663C16.116 10.2952 14.437 8.61627 12.366 8.61627C10.2949 8.61627 8.61597 10.2952 8.61597 12.3663C8.61597 14.4373 10.2949 16.1163 12.366 16.1163Z"/></svg>',
) !default;

$formField_revealer_styles: (
) !default;

$formField_revealer_states: (
    default: $formField_revealer_styles,
    hover: (
        color: $_action-color--hover,
    ),
    focus: $_focus_styles,
    disabled: (
        color: $_action-color--disabled,
    ),
) !default;
  • URL: /components/raw/formfield/_formField.settings.scss
  • Filesystem Path: components/03-fragments/formFragments/formField/_formField.settings.scss
  • Size: 1.9 KB
  • Content: 
    %formField {
    @include stack-spacing();
    @include field-stacking();

    &-flexbox {
        display: flex;
        column-gap: var(--gg, 2ch);
        row-gap: var(--sp);
        flex-wrap: wrap;
    }

    .label {
        margin-top: 0;
    }

    .field {
        @include stack-spacing(0);
    }

}

.formField {
    @extend %formField;

    &-flexbox {
        @extend %formField-flexbox;
    }

    &-field {
        @extend %formField-field !optional;
    }

}


    //***** Password *****//

%formField {

    &.is-password {
        position: relative;

        .formField-revealer {
            @extend %formField-revealer;
        }

        .field {
            padding-right: calc(#{$formField_revealer_size} + #{2 * nth($field_padding, 2)});
        }

    }

    &-field {
        position: relative;
    }

    &-revealer {
        display: block;
        width: $formField_revealer_size;
        height: $formField_revealer_size;

        position: absolute;
        top: 50%;
        right: nth($field_padding, 2);
        transform: translateY(-50%);

        text-indent: 200%;
        overflow: hidden;
        white-space: nowrap;

        background: 50% 50% no-repeat;
        background-image: svg-url(map-get($formField_revealer_icons, hidden));

        cursor: pointer;
        outline: transparent;

        &[disabled] {
            cursor: default;
            background-image: svg-url(map-get($formField_revealer_icons, hidden), $_ACTION-COLOR--DISABLED);
        }

        &[data-revealed="true"] {
            background-image: svg-url(map-get($formField_revealer_icons, revealed));
        }

        &[data-revealed="true"][disabled] {
            background-image: svg-url(map-get($formField_revealer_icons, revealed), $_ACTION-COLOR--DISABLED);
        }

        @supports (mask-image: url()) {
            background-image: none !important;
            overflow: hidden;

            @include state-styles($formField_revealer_states);
            @include action-states($formField_revealer_states);

            &::after {
                content: "";

                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                display: block;
                width: $formField_revealer_size;
                height: $formField_revealer_size;

                background-color: currentcolor;

                mask-image: svg-url(map-get($formField_revealer_icons, hidden), black);
                mask-repeat: no-repeat;
                mask-position: center center;

                pointer-events: none;
                user-select: none;
            }

            &[data-revealed="true"]::after {
                mask-image: svg-url(map-get($formField_revealer_icons, revealed), black);
            }

        }

    }

}

//***** Deprecated *****//

@mixin formField-validated(
    $status: success
){
    .label,
    .formField-group-label {
        @extend %label--#{$status} !optional;
    }

    .formField-input:not(:focus) {
        @include state-styles($field_states, $status);
    }

}

.formField {

    &.is-valid {
        @include formField-validated(success);
    }

    &.is-required.is-invalid {
        @include formField-validated(error);
    }

}

//* Layout *//

.formField {
    // Deprecated: Use layout options of formFieldset instead

    flex: 1 0 100%;

    @include only-on-desktop() {

        $variants: (
            one-half: .5,
            one-third: math.div(1, 3),
            two-third: math.div(2, 3),
            one-fourth: math.div(1, 4),
            three-fourth: math.div(3, 4),
        );


        $selector: ();

        @each $name, $value in $variants {

            &.is-#{$name} {
                display: block;
                float: left;

                @include set-column-width($value);
            }

                //FIXME: Is there still a need for this?
            @each $name_sibling in map-keys($variants) {
                $selector: append($selector, "&.is-#{$name} + &.is-#{$name_sibling}", comma)
            }

        }

        #{$selector} {
            margin-left: $_grid_gutter;
        }

    }

    &.is-inline {
        display: inline-flex;
        width: auto;

        & + & {
            margin-left: $_grid_gutter;
        }

    }

}
  • URL: /components/raw/formfield/_formField.styles.scss
  • Filesystem Path: components/03-fragments/formFragments/formField/_formField.styles.scss
  • Size: 4.4 KB