SearchBar

A search input with a leading search icon and an optional keyboard shortcut badge on the right. Built on top of Input and Kbd. Accepts all standard <input> props.

Anatomy

A relative-positioned wrapper containing an Input with left padding for the icon and right padding for the optional shortcut badge. The search icon is absolutely positioned on the left; the Kbd is absolutely positioned on the right.

⌘K

Variants

With shortcut

⌘K

Without shortcut

Different shortcut keys

⌘P
⌘/
Ctrl+F

In a Navigation Bar

SearchBar is commonly used in site navigation and sidebar headers.

My App
⌘K
Page content

Sidebar Filter

Without a shortcut hint — ideal for filtering local lists inside sidebars or popovers.

Button
Badge
Card
Input
Select

Design Guidelines

Do

  • Show the shortcut when a keyboard binding exists. The Kbd badge sets user expectations and improves discoverability.
  • Use a specific placeholder. "Search components..." tells users exactly what they're searching — more helpful than a generic "Search...".
  • Wire the shortcut to a focus handler. The badge is informational only — implement the keyboard listener separately.

Don't

  • Don't show a shortcut badge without the keyboard listener. Users who press the key and nothing happens lose trust in the UI.
  • Don't use for form search inputs. For search forms with a submit button, use a regular Input with a search button instead.
  • Don't make it full-width everywhere. A 240–320px max-width is appropriate for most sidebar and nav bar placements.

Developer Reference

Props

  • shortcut (optional) — a string displayed in a Kbd on the right edge. E.g. "⌘K".
  • placeholder (optional) — forwarded to the Input element.
  • className — applied to the outer wrapper div.
  • All other props are forwarded to the underlying <Input> (e.g. value, onChange, disabled).
  • Implement keyboard focus yourself via useEffect + window.addEventListener("keydown", ...).

Usage

import { OriginUiSearchBar } from "@/components/branding/origin-ui-search-bar"
import { useRef, useEffect } from "react"

// With keyboard shortcut badge
<OriginUiSearchBar
  placeholder="Search components..."
  shortcut="⌘K"
/>

// Without shortcut
<OriginUiSearchBar placeholder="Search documentation..." />

// Controlled with keyboard focus
const ref = useRef<HTMLInputElement>(null)

useEffect(() => {
  const down = (e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
      e.preventDefault()
      ref.current?.focus()
    }
  }
  window.addEventListener("keydown", down)
  return () => window.removeEventListener("keydown", down)
}, [])

<OriginUiSearchBar
  ref={ref}
  placeholder="Search..."
  shortcut="⌘K"
  value={query}
  onChange={(e) => setQuery(e.target.value)}
/>