Search
Search component provides a user interface element for searching within a designated scope, typically used to retrieve specific information or content.
Examples
Search input can have different shapes.
Rounded Search is suggested to be used in a specific context when the input field stands alone or in a complex context, in order to stand out from the background.
Anatomy
When to use
- Information Retrieval: Utilize the
Searchcomponent when users need to find specific information within a defined dataset or content repository. - Navigation Enhancement: Implement
Searchto facilitate navigation, especially in large datasets or complex systems. - Content Filtering: Use
Searchto enable users to filter content based on specific criteria, improving the overall user experience.
When not to use
- Limited Content: Avoid using
Searchfor small or static content sets where a manual navigation approach might be more efficient. - Simple Interfaces: In straightforward applications, where the complexity of a search feature is unnecessary, consider simpler alternatives.
Alternative Components:
- Dropdown Menus: For a predefined set of options.
- Filter Panes: When users need to apply multiple filters simultaneously.
- Clickable Tags: In scenarios where users can quickly select from a set of predefined options.
Accessibility
- Keyboard Navigation: Ensure the
Searchcomponent can be navigated and activated using keyboard controls for users who rely on them. - Screen Reader Compatibility: Provide descriptive labels and ensure screen readers can interpret and communicate the purpose and results of the search.
- Contrast and Readability: Maintain sufficient colour contrast and text readability for users with visual impairments.
- Focus States: Clearly indicate the focus state of the
Searchcomponent to assist users navigating through the interface. - Aria Roles: Implement ARIA roles appropriately to enhance the understanding of the
Searchcomponent for assistive technologies.