Search Bar

Search bars allow users to search content. They support keyboard shortcuts (⌘K), different sizes, and include a clear button when text is entered.

Search Bar Playground

Preview

Code

Controls

Size:

Small

Default

Large

Shortcut:

Disabled:

Installation

You can add the search bar component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @phosphor-icons/react @react-aria/button @react-aria/focus @react-aria/interactions

Copy and paste the following code into your project.

SearchBar.tsx

CompactIconButton.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { SearchBar } from '@versaui/ui/components/SearchBar';
// Basic search bar
<SearchBar placeholder="Search..." />
// Different sizes
<SearchBar size="large" placeholder="Search products..." />
<SearchBar size="default" placeholder="Search..." />
<SearchBar size="small" placeholder="Quick search" />
// Without keyboard shortcut badge
<SearchBar shortcutKey={false} placeholder="Search docs" />
// Controlled search
const [query, setQuery] = useState('');
<SearchBar 
  value={query}
  onChange={(e) => setQuery(e.target.value)}
  onClear={() => setQuery('')}
  placeholder="Search users..."
/>
// Disabled search
<SearchBar disabled placeholder="Search unavailable" />

Keyboard Shortcuts

⌘K (Mac) / Ctrl+K (Windows): Focus the search bar from anywhere on the page
Escape: Clear the search and blur the input

Accessibility

Uses role="search" for semantic meaning
Keyboard shortcut ⌘K for quick access
Clear button is keyboard accessible
Focus management with visible focus ring

SearchBar Props

Prop	Type	Default	Description
`size`	`'large' \| 'default' \| 'small'`	`'default'`	Search bar size.
`placeholder`	`string`	`'Search'`	Placeholder text.
`value`	`string`	`-`	Controlled input value.
`shortcutKey`	`boolean`	`true`	Show ⌘K keyboard shortcut badge.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(e: ChangeEvent) => void`	`-`	Called on input change.
`onClear`	`() => void`	`-`	Called when clear button is clicked.