V6 Clearleft Patterns

Text Input: With Error 

<div class="Text-input flow--2xs ">
    <label class="Text-input__title small " for="deadline">
        Milestone/deadline
    </label>
    <input placeholder="" class="Input Input--error" type="" id="deadline" name="" value="" />
    <ul class="Input-errors">
        <li>This field is required</li>
    </ul>
</div>
 
{% set hasErrors = errors is defined and (errors|length) %}

<div class="Text-input flow--2xs {{
  classes is defined and classes is not empty
    ? classes
  }}">
  <label class="Text-input__title small {{
    showLabel is defined and not showLabel
      ? 'vh'
    }}"
    for="{{ id }}">
    {{ label }}
  </label>
  <input placeholder="{{
    showPlaceholder is defined and showPlaceholder
      ? label
    }}"
    class="Input {{ hasErrors ? 'Input--error' }}"
    type="{{ type }}"
    id="{{ id }}"
    name="{{ name }}"
    value="{{ value ? value : '' }}"
    {{ required ? 'required' }} />
  {% if hasErrors %}
    {% include '@field-errors' with {
      errors: errors
    } %}
  {% endif %}
</div>
 
{
  "label": "Milestone/deadline",
  "id": "deadline",
  "errors": [
    "This field is required"
  ]
}
  • Content: 
    .Text-input {
  display: flex;
  flex-direction: column;

  &__title {
    font-weight: bold;
  }
}
  • URL: /components/raw/text-input/text-input.css
  • Filesystem Path: src/templates/components/text-input/text-input.css
  • Size: 100 Bytes

No notes defined.