Text inputs
{#
Parameters:
- "id" (string) (default: 'default-id')
- "name" (string) (default: 'default-name')
- "has_error" (boolean) (default: false)
- "is_disabled" (boolean) (default: false)
- "type" (string) (default: 'text')
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
#}
{% include '@ecl/generic-component-form-text-input' %}
/* Normal input */
{
"id": "example-input-id-1",
"extra_attributes": [
{
"name": "placeholder",
"value": "Some placeholder text."
}
]
}
/* Disabled input */
{
"id": "example-input-id-2",
"is_disabled": true,
"extra_attributes": [
{
"name": "placeholder",
"value": "Some placeholder text."
}
]
}
/* Input with error */
{
"id": "example-input-id-3",
"has_error": true,
"extra_attributes": [
{
"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 */ // Import base and generic @import '@ecl/ec-base/ec-base'; @import '@ecl/generic-component-form-text-input/generic-component-form-text-input'; // Use generic mixin @include exports('ec-component-form-text-input') { @include ecl-text-input(); } - URL: /components/raw/ec-component-form-text-input/ec-component-form-text-input.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-text-input/ec-component-form-text-input.scss
- Size: 302 Bytes
- Handle: @ecl/ec-component-form-text-input
- Tags: atom
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-text-input/ec-component-form-text-input.twig