Search controls

Overview

Search components are typically used to:

• Support exploratory and direct search – Components like A to Z navigation and search input fields allow users to browse or jump directly to what they need.
• Help users narrow large result sets – Filters, pagination, and sort controls make it easier to find relevant content quickly.

Use cases

The following table provides a summary of use cases for search controls. Visual examples of each search control type are also provided.

Basic search controls

Search controls help users enter a query and begin their journey. Common elements include:

• Input field
• Icon
• Placeholder copy
• Type-ahead suggestions
• Search button

Filter controls

Filter controls include the following elements:

• Title
• Dropdown
• Search field
• Selectable text
• Buttons
• Slider
• Chips
• Buttons

Sorting  controls

Sorting controls include the following elements:

• Dropdown
• Button

On mobile, filter and sort tools collapse into a unified full-screen interface.

Pagination controls

Pagination controls include the following elements:

• Buttons
• Static text

Desktop Pagination

Mobile Pagination

Filter A to Z

Filter A to Z controls includes the following elements:

• Label
• A to Z Filter item

On mobile, this is accessed via an accordion.

Behavior

Interactive

Most search controls are interactive and respond to user input through clicks, taps, or text entry. These include:

• Search fields – Users can type free-form text, with type-ahead suggestions appearing after a short delay (typically after 1–2 characters).
• Filters – Can be selected, deselected, or reset. Some filters are multi-select; others are single-select.
• Sort controls – Update the order of results upon selection.
• Pagination – Allows users to move between result pages using page numbers or arrows.
• Filter A to Z – Filters the result set when a letter is clicked showing only those results whose first letter matches the selected letter.

Non Interactive

Some elements provide supporting information but do not require user interaction:

• Empty state messaging – Communicates when no results are found or a filter returns zero matches.

• Inactive UI states – Letters in the A–Z index or filters with no matching results appear visually disabled to set expectations.

States

Search controls use a consistent set of visual states to help users understand what’s interactive, what’s selected, and what’s unavailable. These include:

• Hover: Used on desktop to indicate that an element is interactive.
• Buttons change background color or outline.
• Links underline or change color on hover.
• Search suggestions are highlighted as the user moves through them with a mouse or keyboard.

• Focus: Used to show which element is active for keyboard users or screen readers.
• Search inputs display a visible outline or border.
• Dropdowns display expanded content.

• Selected / Active: Used to indicate the current selection.
• Filter tags, sort dropdowns, and pagination numbers are highlighted with a colored state.
• The active A to Z Filter item is clearly distinguished from others and persists during navigation.
• Map/List toggle buttons show which view is currently applied.

• Disabled / Inactive: Used when an option is not available based on the current context.
• A to Z Filter items appear greyed out and are not clickable if no results matching that letter.
• Pagination buttons are visually disabled and not interactive when there is no next or previous page

Customizable  elements

Search controls can be tailored to meet the needs of different content types across Penn Medicine’s digital experiences. While the structure remains consistent, several elements offer flexibility in how they are displayed or configured.

Search

Filter & Sort

Pagination

Filter A to Z

Guidelines (do’s and don’ts)

Do

• Tailor search controls to the content type. Use contextual filters and sorting options that reflect what users are searching for (e.g., Insurance and Specialty for providers; Proximity and Services for locations).
• Provide type-ahead suggestions. Help users get to relevant results faster with predictive search where appropriate.
• Use disabled states to clarify availability. Clearly show when filters or A to Z letters don’t return results.
• Support mobile-first behavior. Collapse filter and sort controls into a full-screen modal on smaller screens.
• Display feedback after search actions. Indicate how many results match the user’s query and filters.
• Ensure accessibility. Use semantic HTML, keyboard navigation, and appropriate ARIA labels across all components.

Don't

• Don’t show filters that return no results. Filters should only appear if they have matching items.
• Don’t apply filters or sorting automatically without feedback. Let users confirm changes with a “Show Results” button, where applicable.
• Don’t default to alphabetical sort for providers. Default sort should prioritize relevance, proximity, or user-centered logic.
• Don’t overload the interface. Prioritize the most used filters as Quick Filters; move others into a pop-out.
• Don’t require location input unless necessary. Let users search freely and provide location only if they want location-based results.

Last updated