Filtered Dropdown

Filtered dropdowns are used when a dropdown has many related options. They have a fixed filter so that the user can easily sift the information.

Timezone Selector

Loading Angular…

<div ng-controller='TimezoneController'>
  <timezone-selector timezone='timezone' on-select='onSelect(zone)'>
	<div class="spinner">
	  <div class="bounce1"></div>
	  <div class="bounce2"></div>
	  <div class="bounce3"></div>
	  <h3 class="spinner__title">Loading Angular…</h3>
	</div>
  </timezone-selector>
</div>

Description

This pattern is used when a customer can select an option from a given set of items, they can use the search component to filter through these items before selecting.

Timezone Detector

Loading Angular…

<div ng-controller='TimezoneController'>
  <span ut-timezone="Asia/Tokyo">
	<div class="spinner">
	  <div class="bounce1"></div>
	  <div class="bounce2"></div>
	  <div class="bounce3"></div>
	  <h3 class="spinner__title">Loading Angular…</h3>
	</div>
  <span>
  <span ut-timezone="America/Los_Angeles"></span>
</div>

Description

This pattern detects the timezone and presents the correct region to the customer.

Do

  • Ensure there are enough items in the list to warrant a filtered dropdown
  • Organize similar options together

Don't

  • Nest other dropdowns within a filtered dropdown