Type Ahead
Search the component library

Type Ahead

Download UI Kit v1.9.0

This component defines the standard visual style for the type ahead.

Download UI Kit v1.9.0

Usage Guidelines

Use this component in situations where the user will be keying in values in order to search for a result.


  • Initialized upon focus
  • Filtered as the user inputs or deletes values
  • Results ordered by numerical and alphabetical descending (default) or ascending order
  • Initial results filtered upon popularity
  • Results can be grouped


Inputs v1.0.0

Default States

###Search and Standard Text Input The user’s initial view of the type-ahead functionality will be a search field with the place holder text ‘Search’. Type-ahead can also be implemented within a standard text input field element. The functionality can be communicated through the placeholder text.

Illustrating the two different place holder values.


###Focus and Input Once the user clicks into the field and begins to type characters the response will be a displayed list of suggestions. The response can be buffered if the input can not be kept up with, but a response (results) will be surfaced as soon as resources are available. A user may also back characters out, therefore changing the responses.

###Response and Results The responses that are surfaced to the user are based upon character input, but they can be initially scoped through numerous critieria, dependent upon need and how the componenet is being utilized. (e.g. Geo-location, popularity, etc.)

The results can be displayed in ascending alphabetical order (default) or descending alphabetical order. The user’s typed-in characters will be bolded within the displayed results. Display of results, both vertically (number) as well as horizontally (characer / word length) can be set determined upon available space. But it is recommended that the list of results not be longer than 20 at any given time.

###Selected Values A selected value will be displayed within the field.

List of results.

Selected result.

Constant Values

There may be situations wherein constant values (e.g. Institution lookup) will need to be surfaced to the user no matter what values or characters have been input. These will be displayed at the bottom of the list of results and visually delineated.

Constant values shown below results.


Standard implementation
  • As per default browser functionality
  • Grouping (as provided by standard markup control)
  • Basic label font


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



Initial version