Copy environment

Filefield 

<div class="textfield filefield
    ">
    <label class="textfield__label filefield__label " for="file1">
        Upload file
    </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="file" id="file1" name="fileupload">
    </div>
</div>
 
{% set BEM -%}
    filefield
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
{% endset %}

{% include '@textfield' with {
    data: data,
    type: 'file',
    class: BEM,
    labelClass: 'filefield__label'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Upload file",
    "id": "file1",
    "name": "fileupload"
  }
}
  • Content: 
    import '../textfield/textfield';

import './filefield.scss';
  • URL: /components/raw/filefield/filefield.ts
  • Filesystem Path: src/patterns/components/forms/filefield/filefield.ts
  • Size: 61 Bytes
  • Handle: @filefield--default
  • Filesystem Path: src/patterns/components/forms/filefield/filefield.twig
  • References (1): @textfield

Multiple 

<div class="textfield filefield
    ">
    <label class="textfield__label filefield__label " for="file1">
        Upload file
    </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="file" id="file1" name="fileupload" multiple>
    </div>
</div>
 
{% set BEM -%}
    filefield
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
{% endset %}

{% include '@textfield' with {
    data: data,
    type: 'file',
    class: BEM,
    labelClass: 'filefield__label'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Upload file",
    "id": "file1",
    "name": "fileupload",
    "attributes": "multiple"
  }
}
  • Content: 
    import '../textfield/textfield';

import './filefield.scss';
  • URL: /components/raw/filefield/filefield.ts
  • Filesystem Path: src/patterns/components/forms/filefield/filefield.ts
  • Size: 61 Bytes
  • Handle: @filefield--multiple
  • Filesystem Path: src/patterns/components/forms/filefield/filefield.twig
  • References (1): @textfield

Invalid 

<div class="textfield filefield
     is-invalid">
    <label class="textfield__label filefield__label " for="file1">
        Upload file
    </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="file" id="file1" name="fileupload">
    </div>
    <div class="textfield__error">
        Please check your input
    </div>
</div>
 
{% set BEM -%}
    filefield
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
{% endset %}

{% include '@textfield' with {
    data: data,
    type: 'file',
    class: BEM,
    labelClass: 'filefield__label'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Upload file",
    "id": "file1",
    "name": "fileupload",
    "isInvalid": true,
    "error": "Please check your input"
  }
}
  • Content: 
    import '../textfield/textfield';

import './filefield.scss';
  • URL: /components/raw/filefield/filefield.ts
  • Filesystem Path: src/patterns/components/forms/filefield/filefield.ts
  • Size: 61 Bytes
  • Handle: @filefield--invalid
  • Filesystem Path: src/patterns/components/forms/filefield/filefield.twig
  • References (1): @textfield

Disabled 

<div class="textfield filefield
     is-disabled">
    <label class="textfield__label filefield__label " for="file1">
        Upload file
    </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="file" id="file1" name="fileupload" disabled>
    </div>
</div>
 
{% set BEM -%}
    filefield
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
{% endset %}

{% include '@textfield' with {
    data: data,
    type: 'file',
    class: BEM,
    labelClass: 'filefield__label'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Upload file",
    "id": "file1",
    "name": "fileupload",
    "isDisabled": true
  }
}
  • Content: 
    import '../textfield/textfield';

import './filefield.scss';
  • URL: /components/raw/filefield/filefield.ts
  • Filesystem Path: src/patterns/components/forms/filefield/filefield.ts
  • Size: 61 Bytes
  • Handle: @filefield--disabled
  • Filesystem Path: src/patterns/components/forms/filefield/filefield.twig
  • References (1): @textfield

Hidden Label 

<div class="textfield filefield
    ">
    <label class="textfield__label filefield__label h-visually-hidden" for="file1">
        Upload file
    </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="file" id="file1" name="fileupload">
    </div>
</div>
 
{% set BEM -%}
    filefield
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
{% endset %}

{% include '@textfield' with {
    data: data,
    type: 'file',
    class: BEM,
    labelClass: 'filefield__label'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Upload file",
    "id": "file1",
    "name": "fileupload",
    "isLabelHidden": true
  }
}
  • Content: 
    import '../textfield/textfield';

import './filefield.scss';
  • URL: /components/raw/filefield/filefield.ts
  • Filesystem Path: src/patterns/components/forms/filefield/filefield.ts
  • Size: 61 Bytes
  • Handle: @filefield--hidden-label
  • Filesystem Path: src/patterns/components/forms/filefield/filefield.twig
  • References (1): @textfield