Form Select

Ready

HTML
View
Context
Notes


        
        <form class="form">
    <fieldset>
        <legend class="h3">Select Input Example</legend>
        <ul class="u-list-unstyled">
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="select-sample">Select</label>
                    <select name="select-sample">
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="dolar">Dolar</option>
            <option value="set">Set</option>
          </select>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
        </ul>
    </fieldset>
    <fieldset>
        <legend class="h3">Select State Examples (FPO)</legend>
        <ul class="u-list-unstyled">
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="select-hover-sample">Hover State</label>
                    <select class="hovered" name="select-hover-sample">
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="dolar">Dolar</option>
            <option value="set">Set</option>
          </select>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="select-focus-sample">Focus State</label>
                    <select class="focused" name="select-focus-sample">
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="dolar">Dolar</option>
            <option value="set">Set</option>
          </select>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="select-disabled-sample">Disabled State</label>
                    <select name="select-disabled-sample" disabled>
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="dolar">Dolar</option>
            <option value="set">Set</option>
          </select>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper has-error">
                    <label for="select-error-sample">Error State</label>
                    <select name="select-error-sample">
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="dolar">Dolar</option>
            <option value="set">Set</option>
          </select>
                    <p class="input__error-message">This is a sample error message.</p>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
        </ul>
    </fieldset>
</form>
<!-- /.form -->


        <form class="form">
  <fieldset>
    <legend class="h3">Select Input Example</legend>
    <ul class="u-list-unstyled">
      <li class="form__item">
        <div class="input__wrapper">
          <label for="select-sample">Select</label>
          <select name="select-sample">
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="dolar">Dolar</option>
            <option value="set">Set</option>
          </select>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
    </ul>
  </fieldset>
  <fieldset>
    <legend class="h3">Select State Examples (FPO)</legend>
    <ul class="u-list-unstyled">
      <li class="form__item">
        <div class="input__wrapper">
          <label for="select-hover-sample">Hover State</label>
          <select class="hovered" name="select-hover-sample">
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="dolar">Dolar</option>
            <option value="set">Set</option>
          </select>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
      <li class="form__item">
        <div class="input__wrapper">
          <label for="select-focus-sample">Focus State</label>
          <select class="focused" name="select-focus-sample">
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="dolar">Dolar</option>
            <option value="set">Set</option>
          </select>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
      <li class="form__item">
        <div class="input__wrapper">
          <label for="select-disabled-sample">Disabled State</label>
          <select name="select-disabled-sample" disabled>
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="dolar">Dolar</option>
            <option value="set">Set</option>
          </select>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
      <li class="form__item">
        <div class="input__wrapper has-error">
          <label for="select-error-sample">Error State</label>
          <select name="select-error-sample">
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="dolar">Dolar</option>
            <option value="set">Set</option>
          </select>
          <p class="input__error-message">This is a sample error message.</p>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
    </ul>
  </fieldset>
</form>
<!-- /.form -->


        
            
            /* No context defined for this component. */

Usage

The select input element allows users to enter data into applications and websites. All select input elements should include the following states:

Hover state
Focus state
Disabled state
Error state

Labelling Expectations

All select input elements should be associated with a label.

Focus Expectations

All select input elements should have a visible keyboard focus state.

Keyboard Expectations

Tab = Move to next focusable form element
Enter or Space = Open select dropdown
↑ ↓ = Cycle through dropdown items
Return = Select dropdown item

Screen Reader Expectations

When the select input element is focused, screen readers should announce the following:

Select input label
Select dropdown items