Design
Web component
Is documented
Status
Work in progress
Figma component
Principles
Use when
- to help users find a group of data sets at the module level by typing a string.
- users need to refine their search results by categories, date, relevance, or other filters in indexes and data tables or relevant sections.
Don't use when
- there is a limited or few amount of data. Instead use select.
Structure
- Search input label
- Search filter button (boolean)
- Search icon
- Helper text (boolean)
Properties
Style
Outline-white
The outline-white should be used when the layout or background color is gray-5 or gray-10 . However, this style commonly should be used in index pages.
Outline
The outline input should be used when the layout or card background is mainly white or in background-surface color to balance the contrast.
Sizes
Small
Small search inputs can be used in when the search queries needed to use in smaller areas like overflow menus.
Medium (default)
Search in default size inputs are primarily used in forms, modals, data tables and index pages.
Large
Large size is can be used like grand-search use-cases.
We haven’t yet worked on grand or product level search pattern.
States
|
Enabled |
The enabled state is the default state where the input field is ready for user interaction and accepts type input. |
|---|---|
|
Hover |
The hover state indicates interactivity when the cursor is on the input field by changing the border color. |
|
Focus |
The focus state is when the input is focused, typically after a user clicks on it or navigates to it using the keyboard. |
|
Active |
The active state is when the input is actively being used and ready for the user to type an input. |
|
Destructive |
The destructive input indicates that the input may have invalid data." |
|
Warning |
The warning indicates that there is a potential issue with the input. |
|
Disabled |
The disabled state is for where the input is non-interactive and grayed out, indicating it is not currently usable. |
|
Busy |
When a search input in a busy, that means data being processed. |
Boolean properties
Search filter button
Search filter button allows to user narrowing down search result by selecting filter categories (eg, date and time, record type, customer, issue date) especially on index lists and data tables.
Search input label
Labels for input for describing the input’s function on the form. If a search requires specific action, you can use label with it.
Helper text
If a search input requires further explanation, using helper text can assist in completing the task.
Behavior
Search list feedback
When a user types into the search field, the component dynamically updates the search results list (typically displayed as an overflow menu) in real-time. During this time, the input field enters a busy state to indicate that the search is in progress.
If no results are found, a clear “No results found” (“Kayıt bulunamadı”) message should be displayed. Additionally, the system could suggest alternative queries or similar terms if the search area no direct matches.
Input value length
The search may only trigger after the user types a certain number of characters (e.g., a minimum of 3 characters). This prevents the system from searching with too broad or vague inputs, and ensuring more relevant results.
Search interaction trigger
Common triggers include pressing the Enter key, clicking a search icon, or automatically initiating the search after a short delay once the user stops typing (with a spinner shown during this time to indicate that the search is processing).
However, while auto-triggering searches can create a more dynamic experience, it may become overwhelming if triggered too frequently.
Search context
If the search is context-specific, like within a particular module or page, the component should adapt its behavior and results accordingly such as searching products in inventory, customers, employees, invoices etc.