Resources
Intro & Anatomy
Search components enable users to search for specific content, items, or information by entering keywords or phrases.
Use search when users need to locate particular items from large datasets or content collections, e.g. finding products, articles, or entries where users have specific search terms in mind.
Search components provide immediate feedback and results as users type, helping them quickly locate desired content without browsing through extensive lists or categories.
Options & Styles
Input Value
Selected value displays the user's entered text or data.
Placeholder / Prompt is mandatory and acts as the search's label.
Icons
Left search icon is mandatory and functions as a visual label to identify the search functionality.
Right clear/close icon appears only when search input contains text, allowing users to quickly clear their search.
States
Container states provide visual feedback for user interaction:
Default for standard search appearance
Active when users are engaging with the search field
Icon states offer interactive feedback:
Default for standard icon appearance
Hover for interactive feedback when users engage with icons
Disabled
Disabled selects show that a field exists but isn't currently available for input, e.g. when certain conditions haven't been met or the field is temporarily unavailable.
Best Practice & Usage
Search components should provide clear visual cues and helpful feedback to guide users through the search process. Use search for finding specific items rather than general filtering or browsing scenarios.
Always provide a placeholder inside the search input field. This can be either "Search" or something more specific, e.g. "Search for entries" with icon.
Never display a search field without a placeholder as it functions as a label.
Provide users with proper feedback when there are no results for their search queries.
While an error icon can be utilised, always display additional contextual information.
Display a search field when users can specify the item or content they are looking for.
Avoid using search fields for filtering scenarios where users have a general idea of what they're looking for but might not have specific items in mind.
Theming
You can customise colours, border width and radius, font styles and weights, spacings and sizes to match your design requirements.
When not using MDX icons, a slot is available to use your own icon library or SVG icons for star representations.