Freie Grundschule Pfefferwerk - Frontend Design

Form Field Select 

<div class="c-form__group ">

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

    <div class="c-form__input-container">
        <select aria-describedby="select-description-1" id="select-label-1" class="c-form__input">
            <option value="" disabled selected>Bitte wählen Sie eine Option</option>
            <option value="Option One">Option eins</option>
            <option value="Option Two">Option zwei</option>
            <option value="Option Three">Option drei</option>
        </select>
        <div class="c-form__select-arrow" aria-hidden="true"></div>
    </div>

    <!--
            @int:
            if we have additional field description
            add aria-describedby to field and id to description text c-form__msg
        -->
    <p id="select-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="select-label-{{id}}">
        {{label}} {{#if required}}<span class="c-form__required" title="Pflichtfeld">*</span>{{/if}}
    </label>

    <div class="c-form__input-container">
        <select {{#if described}}aria-describedby="select-description-{{descriptionId}}"{{/if}} id="select-label-{{id}}" class="c-form__input">
            <option value="" disabled selected>{{placeholder}}</option>
            <option value="Option One">Option eins</option>
            <option value="Option Two">Option zwei</option>
            <option value="Option Three">Option drei</option>
        </select>
        <div class="c-form__select-arrow" aria-hidden="true"></div>
    </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="select-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": "Bitte wählen Sie eine Option",
  "required": true,
  "described": "Platz für Hinweistext",
  "descriptionId": 1
}

There are no notes for this item.