Search Input
Search Input and its consequential result views enable query functionality.
Anatomy
- Input Container: Container of the input and its content.
- Search Icon: Fixed in the leading area of the input field to distinguish its functionality.
- Placeholder Hint Text: Customizable contextual information showing only when no text has been entered that highlights potential query capabilities.
- Back Navigation Tertiary Icon Only Button: Inactivates Search Input, returning a user back to their preceding view. Always appears when the input is active regardless of its context. May also appear in an inactive state if a user is exploring their query results. Navigational iconography here varies by platform.
- Input Text: Replaces Placeholder Hint Text when the user types.
- Close Tertiary Icon Only Button: Clears Input Text upon interaction.
Usage Guidance
When to Use
Use Search Input when content is not easily discoverable. When finding content proves time prohibitive, Search Input is a good option to quickly surface information.
When to Consider Something Else
- Consider excluding Search Input in small datasets where information is easily findable. When a user presses on the input, a focus state is triggered where the Search Input temporarily disables other screen functionalities.
- Consider using a more discoverable informational hierarchy when users heavily rely on search for orientation within a page or flow.
Please note that Search Input varies in how it can be surfaced across different features.
Persistent Search
Persistent Search is when the input field is already visible on the screen without user action. Use Persistent Search when search is the primary focus of a feature, flow, or page.
Expandable Search
Expandable Search requires a user to tap on a search icon in order to access the input. Use Expandable Search when search is not the primary focus of a feature, flow, or page.
In addition to control over how it’s surfaced, feature teams may also control what content is available for querying.
Global Search
Global Search queries content across the entire app. Global Search should always be Persistent.
Local Search
Local Search queries content only within a certain feature or page. Local Search could be Persistent or Expandable.
Dataset Search
Dataset Search queries content within a smaller UI element or pattern such as a Prompt. Dataset Search could be Persistent or Expandable.
Search results may also be populated differently using one or more than one of the following methods:
Typeahead
As users enter their queries, results populate using Lists, boldening what has been typed. Typeahead is recommended over other search paradigms such as controlled search where the results are not viewable until a user manually submits their query.
- <2 characters: no results display
- 3+ characters: Search results begin loading, using the skeleton loader until the results are available.
- Boldening: Matching strings from the user query are bolded. The ordering of these items may vary based on backend logic.
Suggestions
Suggested queries may be used in conjunction with Typeahead results. Suggestions are typically based on query history or semantic interpretations of a query. The addition of this search type should be accompanied by an added visual demarcation to separate these results from standard Typeahead.
Behaviors
Wrapping
Typed text stays in place until the input runs out of space. After running out of space, continuing to type will continue to move the text to the left.
Clearing
Inputted text should always persist unless cleared by the user with the trailing Close Icon Button or an earlier screen is navigated back to. This allows users to quickly refine or refer back to their queries.
Exiting
To exit a search and return to their previous location, users must interact with the Back Navigation Icon Button.
Scrolling
The Search Input should always revert to its inactive state with an upward or downward gesture. This allows a user to explore content on the rest of the page. A tap on the screen content without a gesture should not remove the focus state, as this may have been accidental.
While inactive, the Search Input in Persistent Search should take over the Top App Bar when scrolling if it is querying content globally.
However, all other instances of an inactive Search Input should scroll away and reappear with gestures.
Examples
The Search Input only varies in its platform conventions for iconography.
iOS
Android
API Guidelines
Methods
Class name: SearchInput Module name: UIComponentsPlugin
init(
featureData: FeatureMetricsData,
text: Binding<String>,
placeholderHint: String?,
backNavigationAction: (() -> Void)?,
onSubmitAction: (() -> Void)?,
localizer: LocalizationAdapting
)Parameters
| Name | Description |
|---|---|
| featureData | The feature name/context and the screen ID in which the component appears. |
| text | The search string |
| placeholderHint | The hint or prompt to display when text is empty. Defaults to “Search.” |
| backNavigationAction | A back button is shown if a closure is provided |
| onSubmitAction | A closure to run when the user submits their entry from the keyboard |
| localizer | localizer for the field. |
Accessibility Guidelines
Coming soon…
Anatomy
- Input Container: Container of the input and its content.
- Search Icon: Fixed in the leading area of the input field to distinguish its functionality.
- Placeholder Hint Text: Customizable contextual information showing only when no text has been entered that highlights potential query capabilities.
- Back Navigation Tertiary Icon Only Button: Inactivates Search Input, returning a user back to their preceding view. Always appears when the input is active regardless of its context. May also appear in an inactive state if a user is exploring their query results. Navigational iconography here varies by platform.
- Input Text: Replaces Placeholder Hint Text when the user types.
- Close Teritary Icon Only Button: Clears Input Text upon interaction.
Usage Guidance
When to Use
Use Search Input when content is not easily discoverable. When finding content proves time prohibitive, Search Input is a good option to quickly surface information.
When to Consider Something Else
- Consider excluding Search Input in small datasets where information is easily findable. When a user presses on the input, a focus state is triggered where the search input temporarily disables other screen functionalities.
- Consider using a more discoverable informational hierarchy when users heavily rely on search for orientation within a page or flow.
Please note that Search Input varies in how it can be surfaced across different features.
Persistent Search
Persistent Search is when the input field is already visible on the screen without user action. Use Persistent Search when search is the primary focus of a feature, flow, or page.
Expandable Search
Expandable Search requires a user to tap on a search icon in order to access the input. Use Expandable Search when search is not the primary focus of a feature, flow, or page.
In addition to control over how it’s surfaced, feature teams may also control what content is available for querying.
Global Search
Global Search queries content across the entire app. Global Search should always be Persistent.
Local Search
Local Search queries content only within a certain feature or page. Local Search could be Persistent or Expandable.
Dataset Search
Dataset Search queries content within a smaller UI element or pattern such as a Prompt. Dataset Search could be Persistent or Expandable.
Search results may also be populated differently using one or more than one of the following methods:
Typeahead
As users enter their queries, results populate using Lists, boldening what has been typed. Typeahead is recommended over other search paradigms such as controlled search where the results are not viewable until a user manually submits their query.
- <2 characters: no results display
- 3+ characters: Search results begin loading, using the skeleton loader until the results are available.
- Boldening: Matching strings from the user query are bolded. The ordering of these items may vary based on backend logic.
Suggestions
Suggested queries may be used in conjunction with Typeahead results. Suggestions are typically based on query history or semantic interpretations of a query. The addition of this search type should be accompanied by an added visual demarcation to separate these results from standard Typeahead.
Behaviors
Wrapping
Typed text stays in place until the input runs out of space. After running out of space, continuing to type will continue to move the text to the left.
Clearing
Inputted text should always persist unless cleared by the user with the trailing Close Icon Button or an earlier screen is navigated back to. This allows users to quickly refine or refer back to their queries.
Exiting
To exit a search and return to their previous location, users must interact with the Back Navigation Icon Button.
Scrolling
The Search Input should always revert to its inactive state with an upward or downward gesture. This allows a user to explore content on the rest of the page. A tap on the screen content without a gesture should not remove the focus state, as this may have been accidental.
While inactive, the Search Input in Persistent Search should take over the Top App Bar when scrolling if it is querying content globally.
However, all other instances of an inactive Search Input should scroll away and reappear with gestures.
Examples
The Search Input only varies in its platform conventions for iconography.
iOS
Android
API Guidelines
Coming soon…
Accessibility Guidelines
Coming soon…
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.