Design intuitive search experiences

Watch on Apple Developer

TL;DR

• Use the system Search Field and preserve its core affordances: search icon, placeholder, clear button, and the iOS cancel behavior when focused.
• Choose search placement based on navigation model and search scope: bottom or top toolbars, inline fields, Search Tabs, sidebars, or trailing toolbar fields depending on platform and content.
• On iOS, bottom toolbar search improves reachability and animates above the keyboard; Search Tabs work well for global search in tabbed apps.
• Improve search quality with recent searches, predictive suggestions, scope bars, contextual filters, search tokens, and clear no-results states.

Search is navigation, not just input

Search helps people find, navigate, and discover content, especially as apps contain more content and more destinations. The design goal is to let people get directly to what they need without forcing them to browse through hierarchy first.

Apple's search component includes expected behaviors and adapts its visual presentation to placement. In a toolbar it can use glass styling; in the scroll region it uses standard content styling.

• Keep the leading search icon recognizable; the magnifying glass is a universal search affordance.
• Use placeholder text to clarify what can be searched.
• Show a clear button after text entry.
• On iOS, focused search presents a Cancel button that exits search and dismisses the keyboard.
• If customizing for brand, keep the Search Field's core elements intact and make replacement symbols closely resemble the standard ones.

Choose iOS placement from navigation and scope

On iOS, search can appear as a field or button in a toolbar, as a tab in the tab bar, or as an inline field under the top toolbar or in the content area. Placement affects both ergonomics and what people believe they are searching.

The two main design questions are: how people navigate the app, and what the search scope is. A global search affordance and a local search affordance should look and feel different enough that users understand the difference.

• Bottom toolbar search is preferred when it fits the app: it is ergonomic, adjacent to primary actions, and animates above the keyboard when active.
• Top toolbar search is appropriate when the bottom of the screen is occupied, such as by a sheet or other persistent UI.
• A Search Tab is recommended for tabbed apps that need a primary, app-wide search entry point.
• Use a standard Search Tab when the search area can include exploratory content or suggestions before typing.
• Use a prominent Search Tab when users usually know what they want and tapping search should immediately focus the field and show the keyboard.
• Use inline search for a clearly scoped local search, such as searching only within a current library section or list.

Align iPad and Mac search patterns

iPad and Mac share wider displays and similar navigation models, so search placement should be kept as aligned as possible across both platforms. The main choices are the trailing position in the top toolbar, the top of a sidebar, or the top of a dedicated Search Tab or section.

• Place primary search in the trailing toolbar position for split-view apps that search across multiple columns, while keeping selected detail content visible.
• Use toolbar search when results are expected to appear in the detail view or directly filter the visible content below.
• Toolbar search can scale or collapse into a button when space is constrained; when activated, it expands to a text-entry width and can move overflow items into a menu.
• Place search in the sidebar when filtering sidebar content or navigation, especially when the detail view is rich and should not be confused with the search target.
• Use a dedicated sidebar item or Search Tab for rich, multi-section apps that benefit from a single global search surface and a larger results canvas.

Use suggestions and recents to reduce typing

A good search experience starts helping before the user finishes a query. Recent searches help people return to prior results, and predictive suggestions reduce typing when they naturally complete what the user is entering.

• On iOS, show recent searches inline when the field becomes focused.
• On iPad and Mac, recent searches can appear in a menu when the field is in a toolbar or sidebar.
• In a Search Tab, recent searches can appear alongside other suggested content on the page.
• Be selective: in some apps, it is more useful to show specific results the user viewed or engaged with rather than every query.
• Allow deletion of individual recent searches, such as with swipe actions, and provide a clear-all action in the section header.
• Visually distinguish typed input from the predictive part of a suggestion, and limit suggestion count so results remain the focus.

Help people refine results without losing context

Search should often start broad, especially for a primary Search Field, then let people narrow results as needed. The right refinement UI depends on whether users are narrowing by location, category, account, person, place, or content type.

• Use a scope bar for lightweight filtering, such as switching between all mailboxes and the current mailbox.
• Show contextual filters only when relevant to the query or result type to avoid overwhelming users.
• Use search tokens when specific keywords can be applied as inline filters within the Search Field.
• Tokens are useful for natural-language-style filtering, such as combining person, place, date, or content type constraints.
• Do not rely on tokens as the only filtering UI when discoverability matters; pair them with visible controls like a scope bar or filters.

Fail gracefully when there are no results

A blank result area can make users wonder whether the search ran at all. A no-results state should confirm the search completed and help users recover, especially from typos or overly narrow filters.

• Use a well-considered empty state or no-results view when a query returns nothing.
• Apple provides a content unavailable view that can be configured for search with a search symbol, title, and subtitle.
• Consider including the current search text in the empty state so users can quickly spot mistakes.

Related Sessions

• Design foundations from idea to interface
• Get to know the new design system
• Meet Liquid Glass

Related sessions

• 227Create UI prototypes using agents in XcodeUse Xcode coding agents and previews to prototype SwiftUI screens, realistic states, and tunable interactions without giving up design judgment.
• 234Design immersive environments for visionOS apps and the spatial webDesign photoreal immersive visionOS and spatial web environments with intentional pre-production, high-quality capture, 3D cleanup, motion, and Spatial Audio.
• 250Principles of great designA practical framework for designing Apple-platform experiences with purpose, agency, responsibility, familiarity, flexibility, simplicity, craft, and delight.
• 251Communicate your brand identity on iOSPractical iOS design guidance for expressing brand through content, color, typography, components, motion, and iconography without breaking platform conventions.
• 252Design no-code games with Reality Composer Pro 3Use Reality Composer Pro 3 ScriptGraph to prototype RealityKit games with visual nodes, physics, custom events, reusable subgraphs, and SwiftUI attachments.
• 290Craft clear names for features and labels in your appLearn a practical UX writing framework for naming app features, settings, labels, and plans so they feel clear, trustworthy, and on-brand.