Copy environment

Select

Preview 
<div class="textfield select">
    <label class="textfield__label select__label" for="select1">
        Select label
    </label>
    <div class="textfield__inner">
        <select name="" id="select1" class="textfield__input select__input">
                    <option
                value="1"
                            >Option 1</option>
                    <option
                value="2"
                 selected             >Option 2</option>
                    <option
                value="3"
                            >Option 3</option>
                    <option
                value="4"
                            >Option 4</option>
            </select>
        <svg class="icon  select__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow-down"></use>
</svg>

    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Select label",
    "id": "select1",
    "options": [
      {
        "name": "Option 1",
        "value": "1"
      },
      {
        "name": "Option 2",
        "value": "2",
        "isSelected": true
      },
      {
        "name": "Option 3",
        "value": "3"
      },
      {
        "name": "Option 4",
        "value": "4"
      }
    ]
  }
}

Invalid

Preview 
<div class="textfield select is-invalid">
    <label class="textfield__label select__label" for="select1">
        Select label
    </label>
    <div class="textfield__inner">
        <select name="" id="select1" class="textfield__input select__input">
                    <option
                value="1"
                            >Option 1</option>
                    <option
                value="2"
                 selected             >Option 2</option>
                    <option
                value="3"
                            >Option 3</option>
                    <option
                value="4"
                            >Option 4</option>
            </select>
        <svg class="icon  select__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow-down"></use>
</svg>

    </div>
    <div class="textfield__error">
        Please check your input
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Select label",
    "id": "select1",
    "options": [
      {
        "name": "Option 1",
        "value": "1"
      },
      {
        "name": "Option 2",
        "value": "2",
        "isSelected": true
      },
      {
        "name": "Option 3",
        "value": "3"
      },
      {
        "name": "Option 4",
        "value": "4"
      }
    ],
    "isInvalid": true,
    "error": "Please check your input"
  }
}

Disabled

Preview 
<div class="textfield select is-dirty is-disabled">
    <label class="textfield__label select__label" for="select1">
        Select label
    </label>
    <div class="textfield__inner">
        <select name="" id="select1" class="textfield__input select__input" disabled>
                    <option
                value="1"
                            >Option 1</option>
                    <option
                value="2"
                 selected             >Option 2</option>
                    <option
                value="3"
                            >Option 3</option>
                    <option
                value="4"
                            >Option 4</option>
            </select>
        <svg class="icon  select__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow-down"></use>
</svg>

    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Select label",
    "id": "select1",
    "options": [
      {
        "name": "Option 1",
        "value": "1"
      },
      {
        "name": "Option 2",
        "value": "2",
        "isSelected": true
      },
      {
        "name": "Option 3",
        "value": "3"
      },
      {
        "name": "Option 4",
        "value": "4"
      }
    ],
    "isDisabled": true,
    "value": "Tere"
  }
}

Required

Preview 
<div class="textfield textfield--required select">
    <label class="textfield__label select__label" for="select1">
        Select label
    </label>
    <div class="textfield__inner">
        <select name="" id="select1" class="textfield__input select__input">
                    <option
                value="1"
                            >Option 1</option>
                    <option
                value="2"
                 selected             >Option 2</option>
                    <option
                value="3"
                            >Option 3</option>
                    <option
                value="4"
                            >Option 4</option>
            </select>
        <svg class="icon textfield--required select__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow-down"></use>
</svg>

    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Select label",
    "id": "select1",
    "options": [
      {
        "name": "Option 1",
        "value": "1"
      },
      {
        "name": "Option 2",
        "value": "2",
        "isSelected": true
      },
      {
        "name": "Option 3",
        "value": "3"
      },
      {
        "name": "Option 4",
        "value": "4"
      }
    ]
  },
  "modifier": "textfield--required"
}