Select Input

Select using Select2

<label>Select using Select2</label>
<select id="selectfield1" class="form-control select2" name="selectfield1">
  <option>Option 1</option>
   <option>Option 2</option>
   <option>Option 3</option>
</select>

Disabled

Disabled select using Select2

<label>Disabled select using Select2</label>
<select id="selectfield1" class="form-control select2" disabled="disabled" name="selectfield1">
   <option>Option 1</option>
   <option>Option 2</option>
   <option>Option 3</option>
</select>

Required

   
       
       Required select using Select2
   
   
       
   
<div class="form-group is-required">
   <label class="col-sm-5 control-label" for="selectfield2">
       <span class="required-marker"></span>
       Required select using Select2
   </label>
   <span class="col-sm-7">
       <select id="selectfield2" class="form-control select2" required="true" aria-required="true" name="selectfield2">
           <option>Option 1</option>
           <option>Option 2</option>
           <option>Option 3</option>
       </select>
   </span>
</div>

Required - Just Filled

   
       
       Required select using Select2 - just filled
   
   
       
   
<div class="form-group is-filled">
   <label class="col-sm-6 control-label" for="selectfield3">
       <span class="required-marker"></span>
       Required select using Select2 - just filled
   </label>
   <span class="col-sm-6">
       <select id="selectfield3" class="form-control select2" required="true" aria-required="true" name="selectfield3">
           <option>Option 1</option>
           <option>Option 2</option>
           <option>Option 3</option>
       </select>
   </span>
</div>

Required - Previously Filled

   
       
       Required select using Select2 - previously filled
   
   
       
   
<div class="form-group is-prefilled">
   <label class="col-sm-6 control-label" for="selectfield4">
       <span class="required-marker"></span>
       Required select using Select2 - previously filled
   </label>
   <span class="col-sm-6">
       <select id="selectfield4" class="form-control select2" required="true" aria-required="true" name="selectfield4">
           <option>Option 1</option>
           <option>Option 2</option>
           <option>Option 3</option>
       </select>
   </span>
</div>

Invalid

   
       Invalid select using Select2
   
       
   
<div class="form-group has-error">
   <label class="col-sm-3 control-label" for="selectfield5">
       Invalid select using Select2</label>
   <span class="col-sm-9">
       <select id="selectfield5" class="form-control select2 invalid" name="selectfield5">
           <option>Option 1</option>
           <option>Option 2</option>
           <option>Option 3</option>
       </select>
   </span>
</div>