Europa Component Library

Text inputs

Documentation • Demo

Text inputs

{% include '@ec-europa/ecl-forms-text-inputs' with context %}
 
/* Normal input */
{
  "id": "example-input-id-1",
  "extraClass": "ecl-text-input--ema",
  "extraAttributes": [
    {
      "name": "placeholder",
      "value": "Some placeholder text."
    }
  ]
}


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


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


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


<!-- Disabled input -->
<input type="text" class="ecl-text-input ecl-text-input--ema" 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 ecl-text-input--ema" id="example-input-id-3" name="default-name" placeholder="Some placeholder text." />
  • Content: 
    /**
 * Text input component
 * @define text-input
 */

.ecl-text-input--ema {
  &:focus {
    border-color: map-get($ema-colors, 'blue-1');
    outline: 3px solid map-get($ema-colors, 'blue-1');
  }
}
  • URL: /components/raw/ema-forms-text-inputs/ema-forms-text-inputs.scss
  • Filesystem Path: framework/components/ema-forms-text-inputs/ema-forms-text-inputs.scss
  • Size: 201 Bytes
  • Handle: @ec-europa/ema-forms-text-inputs
  • Preview:
  • Filesystem Path: framework/components/ema-forms-text-inputs/ema-forms-text-inputs.twig