Preview
Code
<usln-search-field
placeholder="Search"
size="medium"
search-term="Digital Adoption"
theme="light"
is-disabled="false"
>
</usln-search-field>
Search field example with placeholder
Guidelines
This component can be used in Portal or Editor, but not in Player. It is not the same component as search in dropdown menus.
Use a search field to let users search through a large amount of content in a page or table.
Placement of the component should help identify its scope, i.e. what users can search. Place the field above searchable content whenever possible.
Behaviour
Display search results
- Search results are displayed on type-ahead, pressing enter or clicking a button is not necessary.
- They should appear below the search field, if necessary replacing other content. Always provide a clear way to dismiss search results, "clear" button is the minimum solution that should be provided.
- If searchable items were grouped, preserve their grouping in search results (e.g. grouping guides by chapter title).
- Show the total number of search results, if necessary, split by content type.
Sorting search results
Remember to define a sorting order:
- Sort search results by hit accuracy whenever possible.
- Allow users to sort by different item properties if more than just item name is displayed.
- Alphabetical sorting should only be used as a fallback solution.
No search results
Display this pleaceholder in search results area when no results are available. Adapt the text if necessary.
Do's and dont's
- Make search error-tolerant, e.g., in case of typos.
- Display search results in a way that makes it easy to identify the correct item.
- Highlight the search term in search results.
- Allow the use of numbers and special characters in search keywords.
- Search should not be case-sensitive.
Content guidelines
Where the context for the search function is clear from the placement alone (e.g. in a table, in a dropdown), the placeholder text should say "Search". Modify this text if you want to indicate additional functionality, such as searching through multiple content types ("Search for guides or announcements").
Variants
Sizes
L
Use as a standalone, key UI element, e.g. in the sidebar on Manage page.
M
Use in organisms such as headers, where search is one of a small group of available actions.
S
Use in complex organisms with limited space, such as tables.