UX Framework
Institution Lookup
Search the component library

Institution Lookup

v1.0.0-beta.2
Download UI Kit v1.9.0

This component defines the standard visual style for the institution lookup.

Download UI Kit v1.9.0

Usage Guidelines

Every instance of an institution dropdown should be based upon this component.

Features

  • Dropdown, scrollable listing of alphabetized institutions
  • Filtered by type-ahead functionality
  • Stateful, will show pre-selected values first
  • Sorted by geography, by ip. (e.g. OX in the U.S. may place Oxnard College high in the results, while in the U.K. it may place Oxford high.)

Dependencies

Inputs v1.0.0

Type-ahead v

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

Default States

Anonymous and First Time

The user’s initial (or an anonymous user’s) view of the institution lookup will be a search field with the place holder text ‘Institution or School’. This is also true if there are no values available, or none associated with an account.

Affiliated Institution

If the user is signed in, and there is at least one institution or school associated with the user’s account, the control will then be displayed as a select box with the primary or only institution displayed as the default value.

Illustrating the two different place holder values.

Pre-Set Values (Select List)

If a user has one or more institutions associated with their account, these will be displayed in a traditional dropdown manner. The Primary institution will be indicated as per default browser select functionality.

Optional values: All optional values are surfaced within the appropriate context. (i.e. There may be certain situations where a specific value does not make sense given the context of the control.) There is also an outstanding question regarding how the control affects the user’s account.

Displayed values from a user’s account.

Optional contextual values.

Type-ahead Functionality

The type-ahead functionality will be initiated when the user either selects the field and begins typing, or if they select ‘Search for an Institution or School’ from the select dropdown. Either action will clear the select list values (minus the two static values: I am not affiliated with an institution or school. I do not see my institution or school.) and begin populating based upon the user’s keyed in values.

Type-Ahead functionality.

Redlines

Select

Using optgroup
  • As per default browser functionality
  • Grouping
  • Basic label font

Type-ahead

List
  • Horizontal Rule 1px solid Hairline Gray (#d0d0d0)
  • Permanent values #D6D6D6
  • Typed in values bolded across all suggestions

Changelog

1.0.0-beta.1

Initial version