Aeroporto di Bologna - Design System

Input textarea 

<label for="textarea-field" class="" aria-label="">
    Label: <span class="required-marker" aria-hidden="true">*</span>
    <textarea id="textarea-field" placeholder="Your placeholder here" class="" rows="4" required aria-required="true" aria-describedby="textarea-note"></textarea>
    <em class="c-field__note u-visuallyhidden" id="textarea-note">
        Inserisci il messaggio
    </em>
</label>
 
<label for="{{ label_id }}" class="{{ label_class }}" aria-label="{{ screen-reader-text }}">
  {{ label_message }} {{#if atom-textarea.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  <textarea 
    id="{{ atom-textarea.id }}"
    placeholder="{{ atom-textarea.placeholder }}"
    class="{{ atom-textarea.class }}"
    rows="{{ atom-textarea.rows }}"
    {{#if atom-textarea.required}}
      required aria-required="true"
    {{/if}}
    {{#if atom-textarea.hasNote}}
      aria-describedby="{{ atom-textarea.describedby }}" 
    {{/if}}
    {{#if atom-textaea.isInvalid}}
      aria-invalid=”true”
    {{/if}}
  ></textarea>
  {{#if atom-textarea.hasNote}}
  <em class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </em>
  {{/if}}
</label>
 
{
  "label_id": "textarea-field",
  "label_message": "Label:",
  "label_class": "",
  "atom-textarea": {
    "id": "textarea-field",
    "class": "",
    "rows": "4",
    "placeholder": "Your placeholder here",
    "required": true,
    "hasNote": true,
    "describedby": "textarea-note"
  },
  "note_id": "textarea-note",
  "note_message": "Inserisci il messaggio",
  "note_class": "u-visuallyhidden"
}

No notes defined.