Freie Grundschule Pfefferwerk - Frontend Design

Form Field Input 

<div class="c-form__group ">
    <!--
        @int:
        to provide accessibility always provide labels,
        if we have to hide them add u-visually-hidden class
    -->
    <label class="c-form__label " for="input-text-label-1">
        Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
    </label>

    <div class="c-form__input-container">
        <input aria-describedby="input-text-description-1" id="input-text-label-1" type="text" placeholder="Platzhaltertext" class="c-form__input" required>
    </div>

    <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
    <p id="input-text-description-1" class="c-form__msg u-typo:s">Platz für Hinweistext...</p>

</div>
 
<div class="c-form__group {{#if isValid}}is-valid{{/if}}{{#if isError}}is-error{{/if}}">
    <!--
        @int:
        to provide accessibility always provide labels,
        if we have to hide them add u-visually-hidden class
    -->
    <label class="c-form__label {{#if hiddenClass}}u-visually-hidden{{/if}}" for="input-text-label-{{id}}">
        {{label}} {{#if required}}<span class="c-form__required" title="Pflichtfeld">*</span>{{/if}}
    </label>

    <div class="c-form__input-container">
        <input {{#if described}}aria-describedby="input-text-description-{{descriptionId}}"{{/if}}
            id="input-text-label-{{id}}"
            {{#if type}}type="{{type}}"{{else}}type="text"{{/if}}
            {{#if placeholder}}placeholder="{{placeholder}}"{{/if}}
            class="c-form__input"
            {{#if required}}required{{/if}}
            {{#if isValid}}value="Eingabe valide"{{/if}}
            {{#if isError}}value="Eingabe fehlerhaft"{{/if}}>
        {{#if icon}}
            <span class="c-form__icon" aria-hidden="true">{{render '@icon-font--email'}}</span>
        {{/if}}
    </div>

    {{#if described}}
        <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
        <p id="input-text-description-{{descriptionId}}" class="c-form__msg u-typo:s">{{described}}</p>
    {{/if}}

</div>
 
{
  "id": "1",
  "isValid": null,
  "isError": null,
  "hiddenClass": null,
  "label": "Feld-Bezeichnung",
  "required": true,
  "placeholder": "Platzhaltertext",
  "icon": null,
  "described": "Platz für Hinweistext...",
  "descriptionId": 1
}

There are no notes for this item.