Forms Select
Select

Select allows users to make a selection from a list of options.

Select default

                            
                            <div class="ds-form-group">
    <label  class="ds-form-label"><span>Select option</span></label>
     <div class="ds-form-input-group">
          <div class="ds-form-input-wraper">
              <select class="ds-form-control">
                  <option>Option1</option>
                  <option>Option2</option>
                  <option>Option3</option>
                  <option>Option4</option>
              </select>
          </div>
    </div>
</div>
Select small

Set heights using classes like .form-control-lg and .form-control-sm.

                                
                                <div class="ds-form-group">
    <label  class="ds-form-label"><span>Select option</span></label>
     <div class="ds-form-input-group">
          <div class="ds-form-input-wraper">
              <select class="ds-form-control ds-form-control-sm">
                  <option>Option1</option>
                  <option>Option2</option>
                  <option>Option3</option>
                  <option>Option4</option>
              </select>
          </div>
    </div>
</div>
Select medium

Set heights using classes like .form-control-lg and .form-control-sm.

                        
                        <div class="ds-form-group">
    <label  class="ds-form-label"><span>Select option</span></label>
     <div class="ds-form-input-group">
          <div class="ds-form-input-wraper">
              <select class="ds-form-control">
                  <option>Option1</option>
                  <option>Option2</option>
                  <option>Option3</option>
                  <option>Option4</option>
              </select>
          </div>
    </div>
</div>
Select Large

Set heights using classes like .form-control-lg and .form-control-sm.

                        
                        <div class="ds-form-group">
    <label  class="ds-form-label"><span>Select option</span></label>
     <div class="ds-form-input-group">
          <div class="ds-form-input-wraper">
              <select class="ds-form-control ds-form-control-lg">
                  <option>Option1</option>
                  <option>Option2</option>
                  <option>Option3</option>
                  <option>Option4</option>
              </select>
          </div>
    </div>
</div>
Disabled

Set heights using classes like .form-control-lg and .form-control-sm.

                                
                                <div class="ds-form-group">
    <label  class="ds-form-label"><span>Select option</span></label>
     <div class="ds-form-input-group">
          <div class="ds-form-input-wraper">
              <select class="ds-form-control" disabled="true">
                  <option>Option1</option>
                  <option>Option2</option>
                  <option>Option3</option>
                  <option>Option4</option>
              </select>
          </div>
    </div>
</div>

Guidelines

  • List the options in a logical order.
  • Select should only be used when there are more than three options for the users to choose from.