Search

Inputs

Navigation

A dedicated search input component with icon, clear button, loading state, and keyboard shortcut hints.

Preview

Interactive search examples

⌘K

Basic Usage

Simple search input

Variants

Different visual styles

Default

Filled

Ghost

Sizes

Available search input sizes

Keyboard Shortcut

Show keyboard shortcut hint

⌘K

/

⌘⇧P

Loading State

Search with loading spinner

Custom Icon

Search with custom icons

Without Icon

Minimal search without icon

Without Clear Button

Search without clear button

Props

Search component API reference

Prop	Type	Default	Description
`variant`	`'default' \| 'filled' \| 'ghost'`	`'default'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the search input
`onSearch`	`(value: string) => void`	—	Callback when the search value changes
`onClear`	`() => void`	—	Callback when the clear button is clicked
`loading`	`boolean`	`false`	Show loading spinner
`icon`	`React.ReactNode`	—	Custom icon (defaults to search icon)
`hideIcon`	`boolean`	`false`	Hide the search icon
`clearable`	`boolean`	`true`	Show clear button when there's a value
`shortcut`	`string`	—	Keyboard shortcut hint (e.g., "⌘K")
`containerClassName`	`string`	—	Additional classes for the container

Usage

Import and implementation example

import { Search } from '@/components/ui/search'

export default function Example() {
  const [value, setValue] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSearch = (searchValue: string) => {
    setValue(searchValue)
    if (searchValue) {
      setLoading(true)
      // Perform search...
      setTimeout(() => setLoading(false), 1000)
    }
  }

  return (
    <Search
      placeholder="Search..."
      value={value}
      onSearch={handleSearch}
      onClear={() => setValue('')}
      loading={loading}
      shortcut="⌘K"
    />
  )
}

Features

Built-in functionality

3 variants: Default, filled, and ghost styles
3 sizes: Small, medium, and large
Loading state: Built-in spinner animation
Clearable: Clear button appears when there's a value
Keyboard shortcut: Display shortcut hint (hidden when typing)
Custom icon: Replace the default search icon
Escape to clear: Press Escape to clear the input
Dark mode: Full dark mode support

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

role="searchbox"aria-label (automatic from placeholder)aria-label on clear button

Keyboard Navigation

Key	Action
`Escape`	Clear the search input
`Tab`	Move focus to/from input and clear button

Notes

Uses type="search" for native search semantics
Clear button is keyboard accessible
Focus ring indicates current focus
Loading state is visually indicated

Related Components

Input Input Group Combobox Searchbar