Freie Grundschule Pfefferwerk - Frontend Design

Form Field Textarea 

<div class="c-form__group ">

    <label class="c-form__label " for="textarea-label-1">
        Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
    </label>

    <div class="c-form__input-container">
        <textarea aria-describedby="textarea-description-1" name="textarea-label-1" id="textarea-label-1" placeholder="Ihr Feedback..." class="c-form__input" required></textarea>
    </div>

    <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
    <p id="textarea-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}}">

    <label class="c-form__label {{#if hiddenClass}}u-visually-hidden{{/if}}" for="textarea-label-{{id}}">
        {{label}} {{#if required}}<span class="c-form__required" title="Pflichtfeld">*</span>{{/if}}
    </label>

    <div class="c-form__input-container">
        <textarea {{#if described}}aria-describedby="textarea-description-{{descriptionId}}"{{/if}} name="textarea-label-{{id}}" id="textarea-label-{{id}}" placeholder="{{placeholder}}" class="c-form__input" {{#if required}}required{{/if}}></textarea>
        {{#if icon}}
            <div class="c-form__icon">{{render '@icons--loupe'}}</div>
        {{/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="textarea-description-{{descriptionId}}" class="c-form__msg u-typo:s">{{described}}</p>
    {{/if}}

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

There are no notes for this item.