Skip to main content

Search Bar

StorybookView in Storybook

Explore interactive examples and all component variations in our Storybook.

The Search Bar functionality in BuildGrid UI can be implemented using various components like Command, Autocomplete, or a simple Input with search styling. Each approach offers different levels of functionality and user experience.

Simple Search Input​

Search Bar with Filters​

Search Bar Sizes​

Implementation Approaches​

Using Command Component​

The Command component provides the most feature-rich search experience with:

  • Built-in keyboard navigation
  • Grouped results
  • Empty state handling
  • Accessible by default

Best for: Command palettes, navigation search, complex filtering

Using Autocomplete Component​

The Autocomplete component offers:

  • Real-time filtering
  • Option selection
  • Customizable dropdown positioning
  • Clear selection functionality

Best for: Form inputs, data selection, filtered searches

Using Input Component​

A simple Input with search styling provides:

  • Lightweight implementation
  • Full control over behavior
  • Easy customization
  • Minimal dependencies

Best for: Simple search forms, basic filtering, custom implementations

Properties​

Uses the Command component properties. See Command documentation for full details.

Uses the Autocomplete component properties. See Autocomplete documentation for full details.

Uses the Input component properties. See Input documentation for full details.

Accessibility​

All search bar implementations include:

  • Keyboard Navigation - Tab, Enter, Escape, and arrow keys
  • Screen Reader Support - Proper ARIA labels and roles
  • Focus Management - Clear focus indicators and logical tab order
  • Search Announcements - Results and state changes announced to screen readers

Common Use Cases​

Search bars are perfect for:

  • Site Search - Global content search functionality
  • Product Filtering - E-commerce product discovery
  • Command Palettes - Quick action and navigation access
  • Data Tables - Filtering large datasets
  • User Selection - Finding and selecting users or items
  • Documentation - Searching through help content

Best Practices​

  1. Choose the Right Component - Match complexity to use case
  2. Provide Clear Placeholders - Help users understand what they can search for
  3. Show Search State - Loading indicators and result counts
  4. Handle Empty States - Provide helpful messages when no results found
  5. Keyboard Shortcuts - Consider adding keyboard shortcuts (Ctrl+K, /)
  6. Mobile Optimization - Ensure touch-friendly interactions
  7. Performance - Debounce search queries and optimize for large datasets
  8. Clear Actions - Provide easy ways to clear or reset searches