Back to components
Shared component

Search Bar

Rounded search input with clear button, optional camera/scanner icon, and submit handler.

Install

What it does

  • Pill-shaped search input with leading search icon
  • Clear text button when input is non-empty
  • Optional camera/scanner icon on the right
  • onSubmitEditing for search execution

When to use

Use it

Search headers, product search, filter-by-keyword inputs.

Skip it

Form text inputs (use the Input component instead).

Files & routes added

  • components/shared/search-bar.tsx

Related components