Europa Component Library

Text inputs

{% set type = type|default('text') %}
{% set id = id|default('default-id') %}
{% set name = name|default('default-name') %}

{# Internal properties #}

{% set _cssClass = 'ecl-text-input' %}
{% set _extraAttributes = '' %}

{# Internal logic - Process properties #}

{% if hasError is defined and hasError == true %}
  {% set _cssClass = _cssClass ~ ' ecl-text-input--has-error' %}
{% endif %}

{% if extraClass is defined %}
  {% set _cssClass = _cssClass ~ ' ' ~ extraClass %}
{% endif %}

{% if isDisabled is defined and isDisabled == true %}
  {% set _extraAttributes = _extraAttributes ~ ' disabled' %}
{% endif %}

{% if extraAttributes is defined %}
  {% for attr in extraAttributes %}
    {% set _extraAttributes = _extraAttributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
  {% endfor %}
{% endif %}

{# Print the result  #}

<input
  type="{{ type }}"
  class="{{ _cssClass }}"
  id="{{ id }}"
  name="{{ name }}"
  {{ _extraAttributes }}
/>
/* Normal input */
{
  "id": "example-input-id-1",
  "extraAttributes": [
    {
      "name": "placeholder",
      "value": "Some placeholder text."
    }
  ]
}

/* Disabled input */
{
  "id": "example-input-id-2",
  "isDisabled": true,
  "extraAttributes": [
    {
      "name": "placeholder",
      "value": "Some placeholder text."
    }
  ]
}

/* Input with error */
{
  "id": "example-input-id-3",
  "hasError": true,
  "extraAttributes": [
    {
      "name": "placeholder",
      "value": "Some placeholder text."
    }
  ]
}

<!-- Normal input -->
<input type="text" class="ecl-text-input" id="example-input-id-1" name="default-name" placeholder="Some placeholder text." />

<!-- Disabled input -->
<input type="text" class="ecl-text-input" id="example-input-id-2" name="default-name" disabled placeholder="Some placeholder text." />

<!-- Input with error -->
<input type="text" class="ecl-text-input ecl-text-input--has-error" id="example-input-id-3" name="default-name" placeholder="Some placeholder text." />

  • Content:
    /**
     * Text input component
     * @define text-input
     */
    
    .ecl-text-input {
      background-color: #fff;
      background-image: none;
      border: 1px solid $ecl-color-shade;
      color: $ecl-color-shade;
      display: block;
      font-family: $ecl-font-family-sans-serif;
      font-size: map-get($ecl-font-size, 's');
      line-height: 1.6;
      margin: 0;
      padding: map-get($ecl-spacing, 'xxxs') map-get($ecl-spacing, 'xxs');
      width: 100%;
    
      /* stylelint-disable-next-line plugin/selector-bem-pattern */
      * + & {
        margin-top: map-get($ecl-spacing, 'xs');
      }
    
      &:focus {
        border-color: map-get($ecl-colors, 'yellow-110');
        outline: 3px solid map-get($ecl-colors, 'yellow-110');
        outline-offset: 0;
        text-decoration: none;
      }
    
      &[disabled],
      &[readonly] {
        background-color: #eee;
        cursor: not-allowed;
        opacity: 1;
      }
    }
    
    .ecl-text-input--has-error {
      border-color: $ecl-color-error;
      border-width: 2px;
    }
    
  • URL: /components/raw/ecl-forms-text-inputs/_text-inputs.scss
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-text-inputs/_text-inputs.scss
  • Size: 912 Bytes
  • Handle: @ec-europa/ecl-forms-text-inputs
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-text-inputs/ecl-forms-text-inputs.twig