Go to main content
Version-1.3.0

Dropdown

Dropdown also known as Select, is used to choose an item from a collection of options.

When to use

  • The dropdown component allows users to choose one option from a list. It is used in forms for users to submit data.
  • Use the dropdown component inside a form where users select from a list of options and submit data.

Guidelines

  • Avoid long lists. This leads to scrolling issues, therefore causing usability and accessibility issues.
  • For field that do need a long list, use filter as it has search option to filter data and select multiple options.
  • Avoid using select lists for data that is familiar to users, e.g., day, month, year of their birth.
  • Make sure the label is always in view, so users are reminded of what the selection is made.
  • Grouping the options semantically when using long lists can help with usability and accessibility.

Basic

Dropdown is used as a controlled component with Select tag along with an options collection. Label and value of an option are defined with the label tag and option value respectively. 

<div class="select">  
  <label class="form-label">Select city</label>
  <select class="js-example-basic-filter form-control" name="state" data-minimum-results-for-search="Infinity">
    <option value="AL">Alabama</option>  
    <option value="WY">Wyoming</option>
  </select>
</div>

Sizes

"dropdown-sm" & "dropdoen-lg" classes are used with dropdown class for respective size options. 

                      <div class="row justify-content-center">
                      <div class="col-md-6 mb-3">
                        <div class="select dropdown-sm">
                          <label class="form-label">Select city</label>
                          <select class="js-example-basic-filter form-control" name="state" data-minimum-results-for-search="Infinity">
                            <option value="AL">Alabama</option>
                            <option value="WY">Wyoming</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="row justify-content-center">
                      <div class="col-md-6 mb-3">
                        <div class="select">
                          <label class="form-label">Select city</label>
                          <select class="js-example-basic-filter form-control" name="state" data-minimum-results-for-search="Infinity">
                            <option value="AL">Alabama</option>
                            <option value="WY">Wyoming</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="row justify-content-center">
                      <div class="col-md-6">
                        <div class="select dropdown-lg">
                          <label class="form-label">Select city</label>
                          <select class="js-example-basic-filter form-control form-control-lg" name="state" data-minimum-results-for-search="Infinity">
                            <option value="AL">Alabama</option>
                            <option value="WY">Wyoming</option>
                          </select>
                        </div>
                      </div>
                    </div>

Group

Options can be grouped when a nested data structures is provided.

<div class="select">
  <label class="form-label">Select city</label>
  <select class="js-example-group form-control" aria-hidden="true" data-minimum-results-for-search="Infinity">
    <optgroup label="Alaskan/Hawaiian Time Zone">
      <option value="AK">Alaska</option>
      <option value="HI">Hawaii</option>
    </optgroup>  
    <optgroup label="Pacific Time Zone">  
      <option value="CA">California</option>  
      <option value="NV">Nevada</option>  
      <option value="OR">Oregon</option>
      <option value="WA">Washington</option>  
    </optgroup>  
    <optgroup label="Mountain Time Zone">  
      <option value="AZ">Arizona</option>  
      <option value="CO">Colorado</option>  
      <option value="ID">Idaho</option>  
      <option value="MT">Montana</option>  
      <option value="NE">Nebraska</option>  
      <option value="NM">New Mexico</option>  
      <option value="ND">North Dakota</option>  
      <option value="UT">Utah</option>  
      <option value="WY">Wyoming</option> 
    </optgroup>  
    <optgroup label="Central Time Zone">  
      <option value="AL">Alabama</option>  
      <option value="AR">Arkansas</option>  
      <option value="IL">Illinois</option>  
      <option value="IA">Iowa</option>  
      <option value="KS">Kansas</option>  
      <option value="KY">Kentucky</option>  
      <option value="LA">Louisiana</option>  
      <option value="MN">Minnesota</option>  
      <option value="MS">Mississippi</option>  
      <option value="MO">Missouri</option>  
      <option value="OK">Oklahoma</option>  
      <option value="SD">South Dakota</option>  
      <option value="TX">Texas</option>  
      <option value="TN">Tennessee</option>  
      <option value="WI">Wisconsin</option>  
    </optgroup>  
    <optgroup label="Eastern Time Zone">  
      <option value="CT">Connecticut</option>  
      <option value="DE">Delaware</option>  
      <option value="FL">Florida</option>  
      <option value="GA">Georgia</option>  
      <option value="IN">Indiana</option> 
      <option value="ME">Maine</option>  
      <option value="MD">Maryland</option>  
      <option value="MA">Massachusetts</option>  
      <option value="MI">Michigan</option>  
      <option value="NH">New Hampshire</option>  
      <option value="NJ">New Jersey</option>  
      <option value="NY">New York</option>  
      <option value="NC">North Carolina</option>  
      <option value="OH">Ohio</option>  
      <option value="PA">Pennsylvania</option>  
      <option value="RI">Rhode Island</option>  
      <option value="SC">South Carolina</option>  
      <option value="VT">Vermont</option>  
      <option value="VA">Virginia</option>  
      <option value="WV">West Virginia</option> 
    </optgroup>  
  </select>  
</div>

Filter

Dropdown provides built-in filtering that is enabled by adding the "js-example-basic-filter" class.

<div class="select">
  <label class="form-label">Select city</label>
  <select class="js-example-basic-filter form-control" name="state">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>

Disabled

When disabled is present, the element cannot be edited. Disabled attribute is implemented.

<div class="select">
  <label class="form-label">Select city</label>
  <select class="js-example-basic-filter form-control" name="state" data-minimum-results-for-search="Infinity" disabled>
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>

Invalid

Invalid state style is added using the ‘invalid’ class to indicate a failed validation.

This field is mandatory 
<div class="select">
  <label class="form-label">Select city<span class="asterisk">*</span></label>
  <select class="js-example-basic-filter form-control invalid" name="state" data-minimum-results-for-search="Infinity">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
  <div class="invalidtext-wrapper">
    <span class="invalidtext">This field is mandatory</span>
  </div>
</div>

Accessibility

  • The component uses semantic markup and therefore it should be accessible.
  • Ensure the component is fully accessible for keyboard-only users as well.
  • Use a unique id for each option.
  • If the selected field is required, include the aria-required property and indicate that it is a required field and use the validation message for input errors.
  • aria-haspop = listitems is being used to indicate the availability and type of interactive popup element that can be triggered by the element on which it is set. The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is.
When to use Guidelines Basic Sizes Group Filter Disabled Invalid Accessibility