Foehn Design System

Textarea 

<!-- Default -->
<div class="form-group">
    <label for="testTextarea">
        Example textarea <span aria-hidden="true">(facultatif)</span>
    </label><textarea class="form-control" id="testTextarea"></textarea>
</div>


<!-- Danger -->
<div class="form-group vd-form-group-danger">
    <label for="testTextarea">
        Example textarea <span aria-hidden="true">(facultatif)</span>
    </label>
    <div class="form-control-feedback">Veuillez saisir votre message</div><small id="testTextareaHelp" class="form-text text-muted">Le message doit contenir au minimum trois caractères.</small><textarea class="form-control" id="testTextarea" aria-invalid="true" aria-describedby="testTextareaHelp"></textarea>
</div>


<div class="form-group{% if validation.class === 'danger' %} vd-form-group-{{ validation.class }}{% endif %}">
  <label for="{{ id }}"
         {%- if labelHidden %} class="sr-only"{% endif %}
         {%- if labelStyleModifier %} class="{{ labelStyleModifier }}" {% endif %}>
    {{ label }}
    {%- if not optional %} <span aria-hidden="true">(facultatif)</span>{% endif %}
  </label>
  {%- if validation.text %}<div class="form-control-feedback">{{ validation.text }}</div>{% endif -%}
  {%- if helpText %}<small id="{{ id }}Help" class="form-text text-muted">{{ helpText }}</small>{% endif -%}
  <textarea class="form-control" id="{{ id }}"{% if rows %} rows="{{ rows }}"{% endif -%}{% if validation.class === 'danger' %} aria-invalid="true"{% endif -%}{%- if helpText %} aria-describedby="{{ id }}Help"{% endif -%}></textarea>
</div>
 
/* Default */
{
  "label": "Example textarea",
  "id": "testTextarea",
  "name": "testTextarea"
}


/* Danger */
{
  "label": "Example textarea",
  "id": "testTextarea",
  "name": "testTextarea",
  "helpText": "Le message doit contenir au minimum trois caractères.",
  "validation": {
    "class": "danger",
    "text": "Veuillez saisir votre message"
  }
}

No notes defined.