Copy environment

Select 

<div class="textfield
     select">
    <label class="textfield__label select__label" for="select1">
        Select label </label>
    <div class="textfield__inner">
        <select name="select" id="select1" class="textfield__input select__input">
            <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis error velit quidem alias nihil mollitia temporibus, maxime dicta repellat. Perspiciatis veniam doloribus, quia corporis commodi sed omnis adipisci facilis nisi.</option>
            <option value="2" selected>Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <svg class="icon  select__icon">
            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom"></use>
        </svg>

    </div>
</div>
 
{% set input %}
    <select
        name="{{ data.name }}"
        id="{{ data.id }}"
        class="textfield__input select__input"
        {% if data.isDisabled %} disabled{% endif %}
        {{ data.attributes }}
    >
        {% for option in data.options %}
            <option
                value="{{ option.value }}"
                {% if option.isSelected %} selected {% endif %}
            >{{ option.name }}</option>
        {% endfor %}
    </select>
    {% include '@icon' with { class: 'select__icon', name: 'chevron-bottom' } %}
{% endset %}

{% include '@textfield' with {
    data: data,
    input: input,
    class: 'select',
    labelClass: 'select__label'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Select label",
    "id": "select1",
    "name": "select",
    "options": [
      {
        "name": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis error velit quidem alias nihil mollitia temporibus, maxime dicta repellat. Perspiciatis veniam doloribus, quia corporis commodi sed omnis adipisci facilis nisi.",
        "value": "1"
      },
      {
        "name": "Option 2",
        "value": "2",
        "isSelected": true
      },
      {
        "name": "Option 3",
        "value": "3"
      }
    ]
  }
}
  • Content: 
    .select__label {
    font-size: 12px;
    top: 0;
}

.select__icon {
    position: absolute;
    top: 24px;
    right: 10px;
    font-size: 14px;
}

.select__input {
    padding-right: 34px;
}
  • URL: /components/raw/select/select.scss
  • Filesystem Path: src/patterns/components/forms/select/select.scss
  • Size: 193 Bytes
  • Content: 
    import '../textfield/textfield';

import './select.scss';
  • URL: /components/raw/select/select.ts
  • Filesystem Path: src/patterns/components/forms/select/select.ts
  • Size: 58 Bytes
  • Handle: @select--default
  • Filesystem Path: src/patterns/components/forms/select/select.twig
  • References (2): @icon, @textfield

Invalid 

<div class="textfield
     select is-invalid">
    <label class="textfield__label select__label" for="select1">
        Select label </label>
    <div class="textfield__inner">
        <select name="select" id="select1" class="textfield__input select__input">
            <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis error velit quidem alias nihil mollitia temporibus, maxime dicta repellat. Perspiciatis veniam doloribus, quia corporis commodi sed omnis adipisci facilis nisi.</option>
            <option value="2" selected>Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <svg class="icon  select__icon">
            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom"></use>
        </svg>

    </div>
    <div class="textfield__error">
        Please check your input
    </div>
</div>
 
{% set input %}
    <select
        name="{{ data.name }}"
        id="{{ data.id }}"
        class="textfield__input select__input"
        {% if data.isDisabled %} disabled{% endif %}
        {{ data.attributes }}
    >
        {% for option in data.options %}
            <option
                value="{{ option.value }}"
                {% if option.isSelected %} selected {% endif %}
            >{{ option.name }}</option>
        {% endfor %}
    </select>
    {% include '@icon' with { class: 'select__icon', name: 'chevron-bottom' } %}
{% endset %}

{% include '@textfield' with {
    data: data,
    input: input,
    class: 'select',
    labelClass: 'select__label'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Select label",
    "id": "select1",
    "name": "select",
    "options": [
      {
        "name": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis error velit quidem alias nihil mollitia temporibus, maxime dicta repellat. Perspiciatis veniam doloribus, quia corporis commodi sed omnis adipisci facilis nisi.",
        "value": "1"
      },
      {
        "name": "Option 2",
        "value": "2",
        "isSelected": true
      },
      {
        "name": "Option 3",
        "value": "3"
      }
    ],
    "isInvalid": true,
    "error": "Please check your input"
  }
}
  • Content: 
    .select__label {
    font-size: 12px;
    top: 0;
}

.select__icon {
    position: absolute;
    top: 24px;
    right: 10px;
    font-size: 14px;
}

.select__input {
    padding-right: 34px;
}
  • URL: /components/raw/select/select.scss
  • Filesystem Path: src/patterns/components/forms/select/select.scss
  • Size: 193 Bytes
  • Content: 
    import '../textfield/textfield';

import './select.scss';
  • URL: /components/raw/select/select.ts
  • Filesystem Path: src/patterns/components/forms/select/select.ts
  • Size: 58 Bytes
  • Handle: @select--invalid
  • Filesystem Path: src/patterns/components/forms/select/select.twig
  • References (2): @icon, @textfield

Disabled 

<div class="textfield
     select is-disabled">
    <label class="textfield__label select__label" for="select1">
        Select label </label>
    <div class="textfield__inner">
        <select name="select" id="select1" class="textfield__input select__input" disabled>
            <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis error velit quidem alias nihil mollitia temporibus, maxime dicta repellat. Perspiciatis veniam doloribus, quia corporis commodi sed omnis adipisci facilis nisi.</option>
            <option value="2" selected>Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <svg class="icon  select__icon">
            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom"></use>
        </svg>

    </div>
</div>
 
{% set input %}
    <select
        name="{{ data.name }}"
        id="{{ data.id }}"
        class="textfield__input select__input"
        {% if data.isDisabled %} disabled{% endif %}
        {{ data.attributes }}
    >
        {% for option in data.options %}
            <option
                value="{{ option.value }}"
                {% if option.isSelected %} selected {% endif %}
            >{{ option.name }}</option>
        {% endfor %}
    </select>
    {% include '@icon' with { class: 'select__icon', name: 'chevron-bottom' } %}
{% endset %}

{% include '@textfield' with {
    data: data,
    input: input,
    class: 'select',
    labelClass: 'select__label'
} %}

{
  "language": "en-US",
  "data": {
    "label": "Select label",
    "id": "select1",
    "name": "select",
    "options": [
      {
        "name": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis error velit quidem alias nihil mollitia temporibus, maxime dicta repellat. Perspiciatis veniam doloribus, quia corporis commodi sed omnis adipisci facilis nisi.",
        "value": "1"
      },
      {
        "name": "Option 2",
        "value": "2",
        "isSelected": true
      },
      {
        "name": "Option 3",
        "value": "3"
      }
    ],
    "isDisabled": true,
    "value": "Tere"
  }
}
  • Content: 
    .select__label {
    font-size: 12px;
    top: 0;
}

.select__icon {
    position: absolute;
    top: 24px;
    right: 10px;
    font-size: 14px;
}

.select__input {
    padding-right: 34px;
}
  • URL: /components/raw/select/select.scss
  • Filesystem Path: src/patterns/components/forms/select/select.scss
  • Size: 193 Bytes
  • Content: 
    import '../textfield/textfield';

import './select.scss';
  • URL: /components/raw/select/select.ts
  • Filesystem Path: src/patterns/components/forms/select/select.ts
  • Size: 58 Bytes
  • Handle: @select--disabled
  • Filesystem Path: src/patterns/components/forms/select/select.twig
  • References (2): @icon, @textfield