Atom

SearchInput

A specialized input for search functionality with built-in search icon, clear button, and loading state.

Overview

The SearchInput component provides a purpose-built search experience with a search icon, optional clear button, and loading state. It's designed for filtering content, global search, and autocomplete triggers.

Props

Prop Type Default Description
size 'sm' | 'md' | 'lg' 'md' Size variant
clearable boolean true Whether to show clear button when input has value
onSearch (value: string) => void - Callback when Enter is pressed
onClear () => void - Callback when clear button is clicked
loading boolean false Shows loading spinner instead of clear button
placeholder string - Placeholder text
disabled boolean false Whether the input is disabled

Variants

Sizes

Three size options for different contexts and layouts.

 
<SearchInput size="sm" placeholder="Small search" />
<SearchInput size="md" placeholder="Medium search" />
<SearchInput size="lg" placeholder="Large search" />

Examples

Basic Search

 
<SearchInput placeholder="Search..." />

Loading State

Shows a loading spinner when search is in progress.

 
<SearchInput placeholder="Searching..." loading />

Disabled State

 
<SearchInput placeholder="Cannot search" disabled />

Without Clear Button

 
<SearchInput placeholder="No clear button" clearable= />

With Callbacks

const [query, setQuery] = useState('');

<SearchInput
  value={query}
  onChange={(e) => setQuery(e.target.value)}
  onSearch={(value) => console.log('Search:', value)}
  onClear={() => setQuery('')}
  placeholder="Press Enter to search"
/>

Accessibility

  • Semantic Role: Uses type="search" for proper semantic meaning and browser optimizations.
  • Keyboard Support: Enter key triggers search, standard input keyboard navigation works as expected.
  • Clear Button: The clear button has an aria-label for screen readers.
  • Loading State: Loading is indicated visually with a spinner replacing the clear button.

Best Practices

  • Use descriptive placeholder text like "Search patients..." instead of just "Search"
  • Show the loading state when search results are being fetched
  • Provide feedback when no results are found
  • Consider debouncing the search callback for better performance