Command Palette

Search for a command to run...

Patterns

Search & Filters

தேடல் மற்றும் வடிகட்டிகள்

Patterns for discovering content. Learn how to design intuitive search bars, filter chips, and graceful empty states.

உள்ளடக்கத்தை தேடி எடுப்பதற்கான வடிவங்கள்.

Search Bar with Filter Chips

A robust search experience often requires both a text input and quick filters to narrow down results. Ensure placeholders and filter names are properly translated.

Component preview
Search & Filtersதேடல் மற்றும் வடிகட்டிகள்

Empty States

When a search yields no results, or a list is naturally empty, provide a clear, helpful message and a way for the user to recover (like clearing filters or creating a new item).

Component preview
Empty Stateகாலி நிலை

Search design guidelines

Provide real-time feedback
நிகழ்நேர முடிவுகளை வழங்கவும்

Filter lists immediately as the user types, rather than requiring a dedicated 'Search' button click.

தேடலுக்கான பிரத்யேக பொத்தானை அழுத்துவதற்குப் பதிலாக, பயனர் தட்டச்சு செய்யும்போதே பட்டியலை உடனுக்குடன் வடிகட்டவும்.

Don't use empty states as dead ends
காலி நிலைகளை முட்டுச்சந்தாக பயன்படுத்த வேண்டாம்

Always provide a way out, such as a 'Clear Filters' button or a link to create a new item.

வடிகட்டிகளை அழிக்கும் பொத்தான் அல்லது புதிய உருப்படியை உருவாக்குவதற்கான இணைப்பு போன்ற ஏதேனும் ஒரு தீர்வு வழியை எப்போதும் வழங்கவும்.