V6 Clearleft Patterns

Textarea 

<div class="Textarea flow">
    <label class="Textarea__title small" for="deadline">Message</label>
    <textarea class="Textarea__input Input " id="deadline" name="" rows="5">

  </textarea>
    <p class="Textarea__prompt small">
        Optional
    </p>
</div>
 
{% set hasErrors = errors is defined and (errors|length) %}
<div class="Textarea flow">
  <label class="Textarea__title small" for="{{ id }}">{{ label }}</label>
  <textarea class="Textarea__input Input {{ hasErrors ? 'Input--error' : '' }}"
    id="{{ id }}"
    name="{{ name }}"
    rows="5"
    {{ required ? 'required' : '' }}>
    {{ value ?? '' }}
  </textarea>
  {% if not required %}
    <p class="Textarea__prompt small">
      Optional
    </p>
  {% endif %}
  {% include '@field-errors' with {
    errors: errors
  } %}
</div>
 
{
  "label": "Message",
  "id": "deadline"
}
  • Content: 
    .Textarea {
  display: flex;
  flex-direction: column;

  > * {
    --flow: 0.5rem;
  }

  &__title {
    font-weight: bold;
  }

  &__prompt {
    font-style: italic;
  }

  .Input {
    resize: vertical;
  }
}
  • URL: /components/raw/textarea/textarea.css
  • Filesystem Path: src/templates/components/textarea/textarea.css
  • Size: 212 Bytes

No notes defined.